Single handler on multiple listener on react

Question

Were trying to use es6 to make dynamic state without multiple handlers but I\'m stuck. I\'ve no clue what\'s wrong with my code below

        
                      

              相关标签:
       
      

Answer 1

the culprit is the extra = sign after this.setState. Also there is not need to use type and dow separate;y since it is available to you directly with 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>

Answer 2

In you case event delegation should help. Instead of binding multiple event handlers for every input, bind single one on the common parent container:

<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>

Now in handleAdvancePrice you can check for proper event target, it should be input elements, i.e. e.target.tagName === 'INPUT', and proceed in this case. But if you don't have other form elements within this container, you don't even need this check, because onChange event can only originate from form elements and if you only have inputs, you are fine and handleAdvancePrice stays untouched.

Answer 3

I think you are not binding the proper context to your function handleAdvancePrice.

If you are building your component using ES6 Class then, you can bind the context to all your functions in constructor like this:

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