@danilr

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

Есть много полей, при изменении которых происходит запись в стейт - и для каждого поля свой обработчик.
Как сделать, чтобы один метод принимал параметр и понимал куда записывать в стейт?
handleChangeKpp = (kpp: string) => {
        this.setState({kpp});
    };

Вот метод, его который надо универсализировать, например, принимает параметр "name" и делает setSatate({name}),
принимает "position" и делает setSatate({name})
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
hzzzzl
@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} />
Ответ написан
Пригласить эксперта
Ответы на вопрос 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
Ответ написан
Комментировать
@abberati
frontend-разработчик
Попробуйте final-form. Отличная библиотека для тех, у кого много полей.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 апр. 2024, в 11:02
5000 руб./за проект
25 апр. 2024, в 10:42
150000 руб./за проект
25 апр. 2024, в 10:41
2000 руб./за проект