Question

试图使用es6来制作没有多个处理程序的动态状态，但是我被卡住了。我不知道下面的代码有什么问题

populateExtendedPropsSuccess

我已经检查了我的其他功能，handleAdvancePrice是罪魁祸首，但它有什么问题？

Answer 1

我认为你没有将正确的上下文绑定到你的函数handleAdvancePrice。

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

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

Answer 2

罪魁祸首是=之后的额外this.setState个符号。此外，不需要type and dow单独使用;因为您可以直接使用e.target.name

＆＃13;

class  App extends React.Component {
constructor() {
  super();
  this.state = {}
}

handleAdvancePrice = (e) => {

    let dow = e.target.name;
    let value = e.target.value;
    
    this.setState ({
        [`advancePrice_${dow}`]: value
    })
}

showStates = () => {
    console.log(this.state) //error this.setState is not a function, caused by handleAdvancePrice
}

render() {

return (
<div>
<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}>Show</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 3

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

<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事件只能来自表单元素，如果你只有输入，那么你很好{{1保持不变。

多个侦听器上的单个处理程序响应

3 个答案: