How to give input value inside the selection option

Question

Here My problem is, When I select other option and I give some text values but it only print 'other' not my text value. How should I do this?

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

Answer 1

You can't put an Input inside the Option . What you can do is probably control the render using component state, controlled using the Select 's onChange event handler:

  state = {
    displayInput: false
  }

  handleChange(event, data) {
    this.setState({ displayInput: data.value === 'Other' });
  }

  render() {
    return (
      <FormItem {...formItemLayout} label="Relation :">
      {
        getFieldDecorator('Relation', {
          rules: [
            { required: true, message: 'Please provide relation!' },
            { max: 200, message: 'Note should be within a 200 characters' }
          ]
        })(
          <Select onChange={(event, data) => this.handleChange(event, data)}>
            <Option value="Father">Father</Option>
            <Option value="Mother">Mother</Option>
            <Option value="Husband">Husband</Option>
            <Option value="Other">Other</Option>
          </Select>
         )
       }
       {
         this.state.displayInput && (
           <Input placeholder="Other" type="text"/>
         )
       }
      </FormItem>
    );
  }