调用多个函数 onChange 事件——React答案

【问题标题】：Call multiple functions onChange event -- React调用多个函数 onChange 事件——React
【发布时间】：2021-06-18 12:03:35
【问题描述】：

我有一个下拉列表的 React 组件。

当任何一个列表项被选中时，需要调用2个函数，它们分别做2件事：

该值应发布在 API 中
还有一些依赖于下拉选项选择的其他操作。

我在“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 中发布值。我怎样才能做到这一点？感谢任何帮助！

【问题讨论】：

是的，它是一个函数。 (e) => {thing1();thing2()}你可以在里面为所欲为。
“我也想调用 handleChange 以在 API 中发布值” - 看起来您的 handleChange 函数正是这样做的。但是您的组件没有调用 handleChange 函数。您是否尝试过调用该函数？具体是什么失败了？您尝试了什么？它是如何“搞砸”的？
嗨大卫，我尝试像this.handlechange 一样单独调用handleChange，效果很好。然后，将它们一起称为onChange={(e) => {this.props.selectedRoleAction(e.target.value) ; this.handleChange}}。选择任何选项时，它会引发错误为：TypeError: Cannot read property 'target' of undefined
为什么会这样？你可以把 this.props.selectedRoleAction(e.target.value) 放在你的 handleChange 函数中
@Ankzious：嗯，this.handleChange 不是你调用函数的方式。但是this.handleChange(e) 是。要显式调用函数，您需要添加括号，并且如果要将任何值传递给该函数，则需要将这些值包含在括号中。与您在代码中调用的所有其他函数不同...

标签： javascript reactjs

【解决方案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">

谢谢大家的指导。感谢您的帮助！

【讨论】：