antd design select placeholder issues

user_6754883 0
Viewed 21105

I am using antd design in my React app.

Here's a code snippet where I am facing the issues :

<Select
     showSearch
     optionFilterProp = "children"
     placeholder = "Select Company"
     value = "{this.state.company}"
     name = "company"
     onSelect = "{this.handleCompanyChange}"
    >

Now it shows the correct value selected if this.state.company is not null. But if this.state.company is empty or null, placeholder doesn't shows up.

How can I solve this issue so that the placeholder appears if value is null?

antd redux create-react-app reactjs javascript
7 Answers

you should update as below:

<Select
     showSearch
     optionFilterProp = "children"
     placeholder = "Select Company"
     value = {this.state.company || undefined} ---- update this line
     name = "company"
     onSelect = "{this.handleCompanyChange}"
    >
user_76600840

It should be set to undefined instead of null or "" empty string.

this.props.form.setFieldsValue({
    myFieldName: undefined
})
user_19662470

I have faced the the same issue, heres the solution: Code snippet for ant design select

<Select key="1" value={this.getStateValue()} showSearch allowClear placeholder='Select Weight' onChange={onWeightChange}>
  {options}
</Select>

where getStateValue will be this:

getStateValue = () => {
    const { value } = this.state;
    if (value) {
      return value;
    }
  }
user_141139580

If you are using Form.create() of the Antd then there is another cool way to set/get the value of the form. Note that in this method the components (Select and others) have to be inside a <Form> element. Also the enclosing class should be passed in Form.create() object as props, as shown below:

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(YourClassName));

This way we have this.props.form available in the props. This will have an important function named getFieldDecorator, as shown below:

const { getFieldDecorator } = this.props.form;

Every Input component must be wrapped inside a , see below:

<FormItem>
   { getFieldDecorator('prefix', {
      initialValue: '86',
    })(
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    );}
</FormItem>

As you can see above, this is more easier way to set initial value to the form elements.

Note that at times when you need to set values of the form elements in functions programatically then you can use setFieldsValue, setFields etc.

Before using getFieldsValue getFieldValue setFieldsValue and so on, please make sure that corresponding field had been registered with getFieldDecorator. Please refer https://ant.design/components/form/?locale=en-US#Form-fields for more information on coordinated controls. Example:

componentDidMount() {
    if (someCheckHere){
            this.props.form.setFieldsValue({
                company: userData.companyName
            })
    }
}
user_67754070

Check the image posted, you need to target the name and try to set it to null if its an empty string, this should work.enter image description here

user_80272680

I changed from:

const [value, updateValue] = useState("");

To:

const [value, updateValue] = useState(undefined);

And it worked!

user_85722050
Related