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