HOC для рендеринга обернутого компонента + дополнительный компонент

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

Итак, если вы хотите создать такой компонент для разных входных данных для формы, могу ли я использовать HOC? Ниже приведен мой текущий код. Как я могу повторно использовать этот компонент, не переписывая тот же класс для другого ввода, скажем, ввода религии? Есть ли другие способы, кроме извлечения двух FormItem в два компонента.

  export class NationalitySelect extends Component {
  state = { showFormInput: false };

  onSelect = (value) => {
    if (value === 'OT') {
      this.setState({ showFormInput: true });
    } else {
      this.setState({ showFormInput: false });
    }
  };

  render() {
    const { decorator } = this.props;
    const { showFormInput } = this.state;
    return (
      <FormItem {...layout} label="Nationality" colon required>
        <Col span={7}>
          <FormItem>
            {decorator('nationality', { initialValue: 'JP' })(
              <FormSelect onChange={value => this.onSelect(value)}>
                <Option value="JP">Japanese</Option>
                <Option value="SG">Singaporean</Option>
                <Option value="OT">Others</Option>
              </FormSelect>,
            )}
          </FormItem>
        </Col>
        {/* show text input if nationality is others */}
        {showFormInput && (
          <Col span={17}>
            <FormItem>
              {decorator('otherNationality', {
                rules: [
                  {
                    required: true,
                    message: 'Please specify your nationality!',
                  },
                ],
              })(<FormInput type="text" />)}
            </FormItem>
          </Col>
        )}
      </FormItem>
    );
  }
}

reactjs higher-order-components
person Kyaw Htet Soe    schedule 11.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы сделал его простым без всего сложного html, но чтобы показать, как я думаю, он будет хорошо работать и может быть использован повторно.

Я бы создал новый расширенный FormSelect лайк

class ImprovedFormSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
           isOther: false;
        }
    }

    onSelect(value) {
        if (value === 'OT') {
            this.setState({ isOther: true });
        } else {
            this.setState({ isOther: false });
        }
    }

    render() {
        return (
            <div>
                <FormSelect onChange={value => this.onSelect(value)}>
                    {this.props.options.map(opt =><Option value={opt.value}>Japanese</Option>)}

                    <Option value="OT">Others</Option>
                </FormSelect>

                {this.state.isOther && <FormInput type="text" />}
            </div>
        )

    }
}

что-то в этой области, но, безусловно, над этим нужно работать. Но чтобы использовать его, вы просто передаете параметры:

<ImprovedFormSelect
    options={[
         'Japanese',
         'Singaporean'
    ]}
/>
person Tzook Bar Noy    schedule 11.07.2018