当用户在下拉列表中选择“其他”时如何获取输入字段答案

【问题标题】：How to get an input field when the user selects "Other" in a dropdown当用户在下拉列表中选择“其他”时如何获取输入字段
【发布时间】：2019-04-07 01:29:00
【问题描述】：

我正在制作一个表单，我希望用户在下拉菜单中选择“其他”时看到一个输入字段。

我对 React 还很陌生，并试图从输入字段中获取值本身，但它不起作用。

<FormItem>
  <h4 className={ 'register_form_title'}><span className={ "red_astrick_sign"}>*</span>Entity type</h4>
  <Select placeholder="Type of entity" onChange={value=> setFieldValue('organisation_type', Number(value))} name="organisation_attributes.organisation_type">
    <Option value="1">Public Limited Company</Option>
    <Option value="2">Private Limited Company</Option>
    <Option value="3">One Person Company</Option>
    <Option value="4">Limited Liability Partnership</Option>
    <Option value="5">Partnership Firm</Option>
    <Option value="6">Sole Proprietorship</Option>
    <Option value="0">Others</Option>
  </Select>
</FormItem>

这是一个简单的下拉菜单，它将所选值转换为数字，因此代码的输出将为{"organisation_type":<value>}。但如果他们选择“其他”，则输入字段应确定<value>。

【问题讨论】：

标签： javascript reactjs jsx antd

【解决方案1】：

使用状态来存储下拉列表的当前值和输入字段的可见性。
在onChange 处理程序中，仅当值不是O（对于其他）时使用转换设置当前值并将输入可见性设置为false。但是，当它为 0 时，将 input-visibility 设置为 true。
在输入字段的onChange 中，设置当前值。

【讨论】：

【解决方案2】：

使用状态变量来跟踪输入字段的可见性。

 constructor(props) {
        super(props);
        this.state = {show_input_field: false}
    }

在您的 onChange 属性中，检查值是否为 0，将 show_input_field 的 setState 设置为 true，否则为 false，从而显示/隐藏输入字段。

使用相同的名称属性可以将值保存在所需的'organisation_attributes.organisation_type': <value> 对中。

render() {
    const {show_input_field} = this.state;
    ...
    <Select placeholder="Type of entity" onChange={value => {
        setFieldValue('organisation_attributes.organisation_type', Number(value));
        if (value === 0)
            this.setState({show_input_field: true});
        else
            this.setState({show_input_field: false});
    }} name="organisation_attributes.organisation_type">
    </Select>

    {show_input_field ? <Input name="organisation_attributes.organisation_type" onChange={handleChange}/> : ""}
    ...
}

希望这会有所帮助。

【讨论】：