Где я должен сохранить свои входные данные?- ReactJS

Question

Итак, вот два способа, которыми я знаю, чтобы сохранить значение в React.Инициализируйте переменную this.state и сохраните данные там (this.setState ({})) или refs (this.refs.nodename.value).Я хотел бы использовать ссылки, потому что это нужно меньше строк.Но что лучше для исполнения?Этот вопрос для вас, мастера реакции.

Спасибо.

<input onChange={ ({ target }) => this.setState({ value: target.value }) } />
// Or
<input ref="somename" />

Answer 1

Я видел, как многие люди использовали следующий формат:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: ''
    }
  }

  onSubmit() {
    callSomeOtherFn(this.state.inputText);
    this.setState({
      inputText: ''
    })
  }

  handleChange(e) {
    this.setState({
      inputText: e.target.value
    })
  }

  render() {
    <input value={this.state.inpuText} onChange={this.handleChange}/>
    <button onClick={this.onSubmit.bind(this)}>Submit</button>
  }
}

И управляли формами / входами из состояния

Answer 2

Вопрос производительности здесь не имеет значения (и при этом нет большой разницы).

Важно то, как вы смотрите на код.

ref - аварийный штрихон предоставляет вам доступ к базовому DOM, который React якобы абстрагируется от вас (когда вы работаете только с React правильно и без ссылок или dangeourslySetInnerHTML, ваш код никогда не узнает, что DOM вообще существует).Это называется неплотная абстракция , и в общих чертах это Плохая вещь ™

Также следует отметить: Ваш второй пример устарел.В будущей версии React ссылки на строки не будут разрешены.

Правильная форма выглядит примерно так:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  render() {
    // ...
    <input ref={ref => this.inputRef = ref} />
  }
}

Не так уж и гламурно;)

---

Myличное предпочтение состоит в том, чтобы как можно больше избегать ссылок и использовать их только в качестве крайней меры, как это должно быть.