如何在选择选项内提供输入值

时间:2018-07-09 04:01:22

标签: javascript reactjs

在这里,我的问题是,当我选择其他选项并给出一些文本值时,它仅打印“ other”而不是我的文本值。我该怎么办?

     <FormItem
        {...formItemLayout}
        label="Relation :"
     >
        {
          getFieldDecorator('Relation', {
                  rules: [
                    { required: true, message: 'Please provide relation!'},
                    { max: 200, message: 'Note should be within a 200 characters' }
                  ]
          })( 
            <Select
                 prefix={<Icon type="book" style={{ fontSize: 13 }} />}
                showSearch
                style={{ width: 150 }}
                placeholder="Select a Relation"
                optionFilterProp="children"
                onChange={this.handleChange}
                onFocus={this.handleFocus}
                onBlur={this.handleBlur}
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
                <Option value="Father ">Father</Option>
                <Option value="Mother ">Mother</Option>
                <Option value="Husband ">Husband</Option>
                <Option value="Wife ">Wife</Option>
                <Option value="Brother">Brother</Option>
                <Option value="Sister">Sister</Option>
                <Option  value=" Other">
                    <Input placeholder="Other" style={{ marginLeft:-7,width: 140,height:32 }} type="text"/>
                </Option>
             </Select>
            )
          }
      </FormItem>

1 个答案:

答案 0 :(得分:0)

您不能在Input中放入Option。您可以做的可能是使用组件状态控制渲染,使用Select的{​​{1}}事件处理程序来控制渲染:

onChange