Существует ли более СУХОЙ подход к созданию элементов формы ввода текста React? - PullRequest
Новая
       93

Существует ли более СУХОЙ подход к созданию элементов формы ввода текста React?

0 голосов
/ 21 декабря 2018

В React и React Native принято включать поля формы <input>, включая обработчик onChange, который обновляет state при каждом нажатии клавиши.Например: 

<input type="text" value={this.state.valueField1} onChange={this.handleChangeField1} />

Состояние обновляется, чтобы предотвратить восстановление значения до исходного значения, пока пользователь печатает.

Это приводит к многократному повторению кода, таким образомнарушая старый принцип СУХОЙ (не повторяй себя).Например (на основе React Docs ): 

  handleChangeField1(event) {
    this.setState({valueField1: event.target.value});
  }

  handleChangeField2(event) {
    this.setState({valueField2: event.target.value});
  }

Проблема здесь в том, что нужно повторить имя поля «Field1» 3 раза вместо одного (только для объявления) и принудительносоздание логики onChange, которая может легко (и по ошибке) изменить стандартное ожидаемое поведение компонентов пользовательского интерфейса для пользователей APP.

Вопрос: Есть ли менее подробный,менее повторяющийся и менее рискованный способ включения <input> полей в приложения ReactJS / React-Native?

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

В качестве ссылки, в простом примере HTML / VanillaJS мы просто добавим <input value="{ServerSideValue}" name="field1"> один раз, а затем получим значение из field1, где бы оно нам ни понадобилось, таким образом, сохраняя поведение собственного компонента и не повторяяfield1 более одного раза в объявлении.

1 Ответ

0 голосов
/ 21 декабря 2018

Это шаблон, который мы часто используем.Я почти уверен, что он отвечает на ваш вопрос: 

class MyForm extends React.Component {
  state = {
    firstName: '',
    lastName: ''
  };

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <div>
        <input
          name="firstName"
          onChange={this.handleChange}
          placeholder="Enter your first name"
          value={this.state.firstName}
        />
        <input
          name="lastName"
          onChange={this.handleChange}
          placeholder="Enter your last name"
          value={this.state.lastName}
        />
      </div>
    );
  }
}

Я сделал для вас пример:

Edit Form State example

Редактировать: Какесли вы беспокоитесь о нативном поведении, вам не нужно беспокоиться об изменении value на onChange.onChange является обратным вызовом события, чтобы мы могли реагировать на это событие.

Существует проблема с контролируемыми и неконтролируемыми входами, и они рекомендуют управлять ими.Вот почему я поставляю value обратно на входы.

Дайте мне знать, как это происходит, или если у вас есть какие-либо вопросы.

...