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

小编典典

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

reactjs

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

阅读 290

2020-07-22

共1个答案

小编典典

罪魁祸首是=后面的多余迹象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>

2020-07-22