Как универсализировать метод?

Question

[danilr]

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

handleChangeKpp = (kpp: string) => {
        this.setState({kpp});
    };

Вот метод, его который надо универсализировать, например, принимает параметр "name" и делает setSatate({name}),
принимает "position" и делает setSatate({name})

Answer 1

[hzzzzl]

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

....

 <input type="text" name="text1" onChange={this.handleChange} />
 <input type="text" name="text2" onChange={this.handleChange} />
 <input type="text" name="text3" onChange={this.handleChange} />

Comments

[danilr]

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

[hzzzzl]

danilr, ну так также

this.setState({ [firstName]: firstName })

key = 'myCustomKey'
object = {[key]: 'this is value'}
// {myCustomKey: "this is value"}

Answer 2

[i1yas]

Вот метод, его который надо универсализировать, например, принимает параметр "name" и делает setSatate({name}),
принимает "position" и делает setSatate({name})

Так сделать не получится, в функцию придется явно передавать название параметра.

setParam = (name: string, value: any) => {
   this.setState({ ...this.state, [name]: value });
}
...
setParam("position", ...);

p.s. В вашем коде в setState передается новый объект без предыдущего состояния, так должно быть? В своем примере добавил ...this.state

Answer 3

[abberati]

Попробуйте final-form. Отличная библиотека для тех, у кого много полей.

Всё, что вам нужно, есть внутри. Гуглите доклад про final-form в ютубе, на holy.js был.