Question

我在我的React app中使用了antd设计。

以下是我遇到问题的代码段：

<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为空时显示占位符？

Answer 1

将this.state.company设置为undefined但为null。

Answer 2

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

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

Answer 3

你应该更新如下：

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

Answer 4

我也遇到了同样的问题，这是解决方案：蚂蚁设计选择的代码段

<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

如果您正在使用Antd的Form.create（），那么还有另一种很酷的方法来设置/获取表单的值。请注意，在这种方法中，组件（Select和其他组件）必须位于<Form>元素内。另外，应将封闭类作为道具传递给Form.create（）对象，如下所示：

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

这样，我们在道具中就有 this.props.form 可用。这将有一个名为getFieldDecorator的重要函数，如下所示：

const { getFieldDecorator } = this.props.form;

每个输入组件必须包装在内，如下所示：

<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 6

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

antd设计选择占位符问题

6 个答案: