Как получить поле ввода, когда пользователь выбирает «Другое» в раскрывающемся списке - PullRequest
Новая
       15

Как получить поле ввода, когда пользователь выбирает «Другое» в раскрывающемся списке

1 голос
/ 07 апреля 2019

Я создаю форму и хочу, чтобы пользователь видел поле ввода при выборе «Другие» в раскрывающемся списке.

Я довольно новичок в 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>.

Ответы [ 2 ]

1 голос
/ 07 апреля 2019
  1. Используйте состояние для сохранения текущего значения раскрывающегося списка и видимости поля ввода.
  2. Внутри обработчика onChange установите текущее значение с преобразованием только тогда, когда оно не равно O (для других), и установите для input-visibility значение false. Но когда оно равно 0, установите для input-visibility значение true.
  3. Внутри onChange поля ввода установите текущее значение, как и при *. 1009 *
0 голосов
/ 07 апреля 2019

Используйте переменную состояния для отслеживания видимости поля ввода. 

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

В вашем атрибуте onChange проверьте, имеет ли значение 0, установите для свойства show_input_field значение true, в противном случае - false, отсюда следует показать / скрыть вводfield.

Использование того же атрибута имени позволяет сохранить значение в нужной паре '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}/> : ""}
    ...
}

Надеюсь, это поможет.

...