Реагируйте - Как настроить onChange для непосредственного изменения реквизита?

Question

У меня есть следующий код, который получает переменную и показывает на экране:

<input type="number" value={this.state.cpf} onChange={this.handleChange} name="name" />

handleChange(event) {
        this.setState({cpf: event.target.value});
      }

handleSignIn(event) {
        alert('A name was submitted: ' + this.state.cpf);
        event.preventDefault();
      }

Я хочу удалить handleChange, чтобы изменить прямые реквизиты в onChange, я пробовал это, но это не сработало:

onChange={this.setState({ cpf: target.value })}

как изменить значение onChange с помощью this.setState?

Answer 1

onChange здесь требуется, чтобы была передана функция, где она может внедрить событие в качестве аргумента.В вашем onChange, target.value будет неопределенным, так как нет ссылки на значение target.

. Если вы измените его на следующее, это решит проблему.

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

В этом случаеу события onChange будет функция, в которой он может передать объект event как e, и вы сможете выполнять свои функции.

Answer 2

Вы можете сделать это, используя функции стрелок ES6:

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

Работает нормально ... Удачи!

Answer 3

Как указывалось @extempl, событие handleChange не вызывается, поскольку оно не привязано к this, поэтому вам необходимо либо связать его с помощью.

Существует несколько способов решить эту проблему, в зависимости от вашегоСоглашения о коде, вы можете просто привязать ключевое слово this к функции следующим образом:

onChange={this.handleChange.bind(this)}

, или вы можете выполнить функцию всякий раз, когда срабатывает onChange:

onChange={event () => this.handleChange(event)} // here i use the ES6 arrow function syntax.

ПРИМЕЧАНИЕ: этиэто всего лишь примеры, вы можете интегрировать это решение в свой собственный проект

Есть также несколько других способов сделать это, но это некоторые из наиболее распространенных, я предоставил ссылку на статью, которая объясняет,а также другие методы:

https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56