Правильно ли устанавливать setState для каждого onChange элементов формы в реакции? (OnChange против ref) - PullRequest
Новая
       11

Правильно ли устанавливать setState для каждого onChange элементов формы в реакции? (OnChange против ref)

0 голосов
/ 03 ноября 2019

Я давно занимаюсь разработкой приложений с реагированием. Я использую как официальный сайт реакции, так и примеры из других источников. Однако у меня есть вопрос. Зачем мне устанавливать setState в onChange каждого элемента ввода? Это делает страницу ненужной визуализации. Позвольте мне объяснить простой пример.

Давайте введем текстовое поле ввода. Если пользователь нажимает «Отправить» после ввода значений, мы хотим показать это значение на экране. Я могу сделать этот пример в 2 видах. Но я не знаю, какой выбрать. Буду признателен, если вы мне поможете.

В примере 1 страница отображается только после нажатия кнопки отправки.

Однако вПример 2, ситуация другая. Страница отображается для каждого значения, которое я ввожу в текстовое поле. И когда я нажимаю кнопку «Отправить», страница отображается.

Когда я смотрю в Интернете, она обычно отображается как в примере 1. Она дает тот же результат в 2 примерах. Но какой мне лучше выбрать?

Пример 1: 

class App extends React.Component {
    state = {
       value: ''
    }

handleSubmit = e => {
     e.preventDefault();
     this.setState({ value: this.textInput.value})
 };

render() {
  return (
    <div>
      <h1>React Ref - Callback Ref</h1>
      <h3>Value: {this.state.value}</h3>
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={e => this.textInput = e} />
        <button>Submit</button>
      </form>
    </div>
  );
 }
}
ReactDOM.render(<App />, document.getElementById("root"));

Пример 2: 

class App extends React.Component {
   state = {
     value: ''
   }

  handleSubmit = e => {
    e.preventDefault();
    this.setState({ value: e.target.value})
  };

  onChange = e => {
    this.setState({ value: e.target.value})
  };

  render() {
    return (
      <div>
        <h1>React Ref - Callback Ref</h1>
        <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.onChange} />
          <button>Submit</button>
       </form>
     </div>
   );
 }
}

ReactDOM.render(<App />, document.getElementById("root"));
...