React to syntax to pass multiple parameters to onChange / onClick functions
source link: https://www.codesd.com/item/react-to-syntax-to-pass-multiple-parameters-to-onchange-onclick-functions.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React to syntax to pass multiple parameters to onChange / onClick functions
So im trying to make react work with ES6 syntax. In ES5 I had setInitialState without a constructor which worked with the function binding syntax. I have a list of prices which is arbitrary and I want the state to change when the input element is changed. But the right price has to be changed.
I'm not even quite sure this is the right way to do it. Can someone please tell me the most recent way this should be done?
Here is my code:
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css';
export default class PriceTable extends Component {
constructor(props, context) {
super(props, context);
this.state = {
pid: this.props.pid || "12345",
name: this.props.name || "name",
prices: this.props.prices || [
{count: 1, desc: 'one', price: 8.25},
{count: 6, desc: 'six', price: 7.60},
{count: 12, desc: 'twelve', price: 6.953}
]
};
this.setPid = this.setPid.bind(this);
this.setName = this.setName.bind(this);
this.setCount = this.setCount.bind(this, i);
this.setDesc = this.setDesc.bind(this, i);
this.setPrice = this.setPrice.bind(this, i);
this.logDebug = this.logDebug.bind(this);
}
setPid(e) {
this.setState({pid: e.target.value})
}
setName(e) {
this.setState({name: e.target.value})
}
setCount(i, e) {
var newPrices = this.state.prices
newPrices[i].count = e.target.value
this.setState({prices: newPrices})
}
setDesc(i, e) {
var newPrices = this.state.prices
newPrices[i].sec = e.target.value
this.setState({prices: newPrices})
}
setPrice(i, e) {
var newPrices = this.state.prices
newPrices[i].price = e.target.value
this.setState({prices: newPrices})
}
_renderPriceRow(price, i) {
return (
<tr key={i}>
<td >
<input type="text" className="form-control" defaultValue={price.count} onChange={this.setCount(this, i).bind(this, i)}/>
</td>
<td >
<input type="text" className="form-control" defaultValue={price.desc} onChange={this.setDesc(this, i).bind(this, i)}/>
</td>
<td >
<input type="text" className="form-control" defaultValue={price.price} onChange={this.setPrice(this, i).bind(this, i)}/>
</td>
</tr>
);
}
render() {
return (
<div className="row">
...
</div>
);
}
}
And this is the error...
PriceTable.jsx:21 Uncaught ReferenceError: i is not defined
at new PriceTable (PriceTable.jsx:21)
You are binding the functions incorrectly
In your constructor you need not specify the argument, you only need to bind it like this.setDesc = this.setDesc.bind(this);
Also In your onChange, when you want to pass paramters to the function you specify it with bind and not pass as arguments and bind them again .
onChange={this.setDesc.bind(this, i)}
You entire code will look like
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css';
export default class PriceTable extends Component {
constructor(props, context) {
super(props, context);
this.state = {
pid: this.props.pid || "12345",
name: this.props.name || "name",
prices: this.props.prices || [
{count: 1, desc: 'one', price: 8.25},
{count: 6, desc: 'six', price: 7.60},
{count: 12, desc: 'twelve', price: 6.953}
]
};
this.setPid = this.setPid.bind(this);
this.setName = this.setName.bind(this);
this.setCount = this.setCount.bind(this);
this.setDesc = this.setDesc.bind(this);
this.setPrice = this.setPrice.bind(this);
this.logDebug = this.logDebug.bind(this);
this._renderPriceRow = this._renderPriceRow.bind(this);
}
setPid(e) {
this.setState({pid: e.target.value})
}
setName(e) {
this.setState({name: e.target.value})
}
setCount(i, e) {
var newPrices = this.state.prices
newPrices[i].count = e.target.value
this.setState({prices: newPrices})
}
setDesc(i, e) {
var newPrices = this.state.prices
newPrices[i].sec = e.target.value
this.setState({prices: newPrices})
}
setPrice(i, e) {
var newPrices = this.state.prices
newPrices[i].price = e.target.value
this.setState({prices: newPrices})
}
_renderPriceRow(price, i) {
return (
<tr key={i}>
<td >
<input type="text" className="form-control" defaultValue={price.count} onChange={this.setCount.bind(this, i)}/>
</td>
<td >
<input type="text" className="form-control" defaultValue={price.desc} onChange={this.setDesc.bind(this, i)}/>
</td>
<td >
<input type="text" className="form-control" defaultValue={price.price} onChange={this.setPrice.bind(this, i)}/>
</td>
</tr>
);
}
render() {
return (
<div className="row">
...
</div>
);
}
}
You could also make use of Arrow functions to pass parameters like
onChange={(e) => this.setDesc(e, i)}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK