antd design select 占位符问题

Question

我在我的 React 应用程序中使用 antd design。

这是我遇到问题的代码片段：

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

现在，如果 this.state.company 不是 null，它会显示选择的正确值。但如果 this.state.company 是 empty 或 null，则不会显示占位符。

如何解决这个问题，以便在 value 为 null 时显示占位符？

Answer 1

将 this.state.company 设置为未定义而不是 null。

Answer 2

如果您正在使用 Antd 的 Form.create()，那么还有另一种很酷的方法来 set/get 表单的值。请注意，在此方法中，组件（Select 和其他组件）必须位于 <Form> 元素内。另外，封闭的 class 应该作为 props 传入 Form.create() 对象，如下所示：

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

这样我们就可以在道具中使用 this.props.form。这里面会有一个重要的函数getFieldDecorator，如下图：

const { getFieldDecorator } = this.props.form;

每个 Input 组件都必须包裹在中，见下文：

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

正如您在上面看到的，这是为表单元素设置初始值的更简单的方法。

请注意，有时当您需要以编程方式在函数中设置表单元素的值时，您可以使用 setFieldsValue、setFields 等.

在使用getFieldsValue getFieldValue setFieldsValue 等之前，请确保相应的字段已经注册到getFieldDecorator。 有关协调控制的更多信息，请参阅 https://ant.design/components/form/?locale=en-US#Form-fields。示例：

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

Answer 3

应该设置为undefined而不是null或""空字符串。

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

Answer 4

我遇到了同样的问题，解决方法如下： ant design 的代码片段 select

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

其中 getStateValue 将是这样的：

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

Answer 5

检查发布的图片，您需要定位名称并尝试将其设置为 null，如果它是空字符串，这应该有效。

Answer 6

你应该更新如下：

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

Answer 7

我改自：

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

收件人：

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

成功了！

antd design select 占位符问题

antd design select placeholder issues

javascript

reactjs

redux

create-react-app

antd