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

IT技术 javascript reactjs
2021-04-11 15:34:40

试图使用 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 是罪魁祸首，但它有什么问题？

3个回答

罪魁祸首是额外的=后标志this.setState。也不需要使用type and dow单独的;y 因为它可以直接提供给你e.target.name

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'));
<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>

检查这个答案
2021-06-10 15:34:40

我认为您没有将适当的上下文绑定到您的函数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保持不变。

其它你可能感兴趣的问题
上一篇使用扩展运算符组合多个数组在 React JS 中获取数据 下一篇如何在MERN中组织后端和前端的文件结构