Javascript react上多个侦听器上的单个处理程序

我们试图使用es6在没有多个处理程序的情况下创建动态状态，但我被卡住了。我不知道下面的代码出了什么问题

<div className="row-wrap">
    <span>Mon</span>
    <input name="1_min" onChange={this.handleAdvancePrice} type="text" />
    <input name="1_max" onChange={this.handleAdvancePrice} type="text" />
</div>
<div className="row-wrap">
    <span>Tue</span>
    <input name="2_min" onChange={this.handleAdvancePrice} type="text" />
    <input name="2_max" onChange={this.handleAdvancePrice} type="text" />
</div>

<button onClick={this.showStates}></button>

..
..

handleAdvancePrice = (e) => {

    let dow = e.target.name.split('_')[0],
    type = e.target.name.split('_')[1],
    value = +(e.target.value);

    console.log(dow, type) // it print correctly

    this.setState = ({
        [`advancePrice_${dow}_${type}`]: value
    })
}

showStates = () => {
    console.log(this.state) //error this.setState is not a function, caused by handleAdvancePrice
}

周一
星期二
..
..
handleAdvancePrice=（e）=>{
让dow=e.target.name.split（“”“）[0]，
type=e.target.name.split（“”“）[1]，
value=+（e.target.value）；
console.log（dow，type）//打印正确
this.setState=({
[`advancePrice{dow}{type}`]：值
})
}
showStates=（）=>{
console.log（this.state）//错误this.setState不是函数，由handleAdvancePrice引起
}

---

我已经检查了我的另一个函数，handleAdvancePrice是罪魁祸首，但它有什么问题？

我认为您没有将适当的上下文绑定到函数

handleAdvancePrice

如果您使用ES6类构建组件，则可以将上下文绑定到构造函数中的所有函数，如下所示：

constructor() {
   this.handleAdvancePrice = this.handleAdvancePrice.bind(this);
}

---

在您的情况下，事件委派应该会有所帮助。不是为每个输入绑定多个事件处理程序，而是在公共父容器上绑定单个事件处理程序：

<div className="container" onChange={this.handleAdvancePrice}>
    <div className="row-wrap">
        <span>Mon</span>
        <input name="1_min" type="text" />
        <input name="1_max" type="text" />
    </div>
    <div className="row-wrap">
        <span>Tue</span>
        <input name="2_min" type="text" />
        <input name="2_max" type="text" />
    </div>
</div>

周一
星期二

---

现在，在

handleAdvancePrice

中，您可以检查事件目标是否正确，它应该是输入元素，即

e.target.tagName==='input'

，在本例中继续。但是，如果此容器中没有其他表单元素，则甚至不需要进行此检查，因为

onChange

事件只能源自表单元素，并且如果只有输入，你很好，

handleAdvancePrice

保持不变。

罪魁祸首是

=

这个之后的额外的

=

符号。设置状态。也不需要使用

类型和dow

分开；y，因为您可以直接使用

e.target.name

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={}
}
handleAdvancePrice=（e）=>{
让道=e.target.name；
设值=e.target.value；
这是我的国家({
[`advancePrice\${dow}`]：值
})
}
showStates=（）=>{
console.log（this.state）//错误this.setState不是函数，由handleAdvancePrice引起
}
render（）{
返回(
周一
星期二
显示
)
}
}
ReactDOM.render（，document.getElementById（'app'））
检查此答案