Блог

Главная - Вопросы по программированию - Вызов нескольких функций на событие обмена — Реагировать

Вызов нескольких функций на событие обмена — Реагировать

#javascript #reactjs

Вопрос:

У меня есть компонент React из выпадающего списка.

Когда выбирается какой-либо элемент списка, необходимо вызвать 2 функции, которые соответственно выполняют 2 действия:

  1. Значение должно быть опубликовано в API
  2. Также выберите некоторые другие действия, зависящие от раскрывающегося списка.

Я попробовал обе функции по одной в обработчике «onChange», они отлично работают по отдельности, но при совместном вызове это все испортило.

Мой код до сих пор выглядит так:

   handleChange(e) {
    e.preventDefault();
    console.log("this is target's value: "  e.target.value)
    this.setState({value: e.target.value})
    let fd = new FormData();
    
    fd.append("value", e.target.value);
    axios({
      method: 'post',
      url: `${api}/project/role`,
      data: fd,
      })
      .then((data) => {
        console.log(this.state)
      })

Компонент визуализации в виде:

 render() {
...
...
        <><div style={{height:'7px'}}>Select from options:</div><br/>
        <select value={this.props.role.prefer} onChange={(e) => this.props.selectedRoleAction(e.target.value)} className="form-control">  //The function placed right now in onChange is a action reducer function.

...
...
}

Теперь в onChange я хочу также вызвать handleChange, чтобы опубликовать значение в API. Как я могу этого достичь? Ценю любую помощь!

Комментарии:

1. да, это функция. (e) => {thing1();thing2()} Ты можешь делать в нем все, что захочешь.

2. «Я также хочу вызвать handleChange, чтобы опубликовать значение в API» — похоже, ваша handleChange функция делает именно это. Но ваш компонент не вызывает handleChange функцию. Вы пробовали вызвать эту функцию? Что конкретно не удалось? Что вы пробовали и как это «все испортило»?

3. Привет, Дэвид, я попытался вызвать handleChange индивидуально , как this.handlechange , что сработало нормально. Затем, собрав их вместе, как onChange={(e) => {this.props.selectedRoleAction(e.target.value) ; this.handleChange}} . При выборе любого параметра он выдает ошибку как : TypeError: Cannot read property 'target' of undefined

4. Почему именно так? Вы могли бы просто поместить это.props.selectedRoleAction(например, целевое значение) в свою функцию handleChange

5. @Ankzious: Ну, this.handleChange это не то, как вы вызываете функцию. Но this.handleChange(e) есть. Чтобы явно вызвать функцию, вам необходимо добавить круглые скобки, и если вы хотите передать этой функции какие-либо значения, вам необходимо включить их в круглые скобки. Мало чем отличается от любой другой функции, которую вы вызываете в своем коде…

Ответ №1:

Чтобы подвести итог решению, обсуждаемому в разделе комментариев:

Вызов 2(или многих других функций) просто сделайте (e) => {thing1();thing2()} так, как предложил Чарльз.

Ответ на вышеприведенную проблему, который сработал, как предложил Дэвид. И о том, как вызвать 2 функции для вышеуказанной проблемы, — это принять событие для обеих функций, таких как:

         <select value={this.state.value} onChange={(e) => this.props.selectedRoleAction(e.target.value) ; this.handleChange(e)} className="form-control">

Спасибо, ребята, за руководство. Спасибо за помощь!

Метки: