Updating Antd v3 form input field with setfieldsvalue from an API response data

Viewed 37

I'm trying to make changes to a form Input field to be read only. The value of this Input field is dependent on a Select field that a user had chosen.

Whenever a user choose an option in the Select field, an API call will be made based on the chosen value. So from these response value, I need to update the mentioned Input field.

below are the code that I wrote, the Input field didn't get update by directly using the Input's value props. I feel that I might need to use form.setFieldsValue(), but I'm not sure how to implement it in this kind scenario.

export default class onBoardForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
      ...
      ocClusters: ["dasda","dasdasd","adasdasd"],
      ocClusterDetails: { ocUrl: "", registry: "" },
    }
  }
     
    onOcClusterChange = async (e) => {
      let ocClusterDetails = await this.getOcCluster(e);
      // ocClusterDetails = { ocUrl: "asdasff", registry: "dasdasdasd" }
    
     this.setState({ ocClusterDetails });
   };
  ...
  ...

   render() {
   ...
   ...

                 <StyledFormItem 
                    label={<span>OC Cluster</span>}>
                    {getFieldDecorator("ocCluster", {
                      rules: [
                        {
                          required: true,
                          message: "Please enter OC Cluster. ",
                          whitespace: true,
                        },
                      ],
                    })(
                      <Select
                        disabled={this.state.occupied}
                        onChange={this.onOcClusterChange}
                      >
                        {this.state.ocClusters.map((ocCluster) => (
                          <Option value={ocCluster} key={ocCluster}>
                            {ocCluster}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </StyledFormItem>
                  <StyledFormItem
                    label={
                      <span>
                        OC URL
                        <Tooltip title="Base Url of openshift">
                          <Icon type="info-circle" />
                        </Tooltip>
                      </span>
                    }
                  >
                    {getFieldDecorator("ocUrl", {
                      rules: [
                        {
                          required: true,
                          message: "Please enter OC URL.",
                          whitespace: true,
                        },
                      ],
                    })(
                      <Input
                        disabled
                        value={this.state.ocClusterDetails.ocUrl}
                      />
                    )}
                  </StyledFormItem>
                  <StyledFormItem label={<span>Registry URL</span>}>
                    {getFieldDecorator("registry1", {
                      rules: [
                        {
                          required: true,
                          message: "Please enter Registry URL.",
                          whitespace: true,
                        },
                      ],
                    })(
                      <Input
                        disabled
                        value={this.state.ocClusterDetails.registry}
                      />
                    )}
           ...
           ...

 }

This is my first time handling Antd library, so any input will be very helpful to me. Thank you

0 Answers
Related