在React中将多个参数传递给事件处理程序
在React中将多个参数传递给事件处理程序
我正在尝试使用ES6语法使React工作。在ES5中,我没有构造函数,而是使用函数绑定语法使用了setInitialState。我有一个任意的价格列表,当输入元素发生变化时,我希望状态也发生变化。但是需要更改正确的价格。
我甚至不确定这是否是正确的方法。请问有人能告诉我最近应该如何完成这个任务吗?
以下是我的代码:
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 (
);
}
render() {
return (
...
);
}
}
并且这是错误...
PriceTable.jsx:21 Uncaught ReferenceError: i is not defined
at new PriceTable (PriceTable.jsx:21)
在React中传递多个参数给事件处理程序的问题是由于绑定函数的方式不正确引起的。解决方法是在构造函数中绑定函数时不需要指定参数,只需要像这样绑定:this.setDesc = this.setDesc.bind(this);
同时,在onChange事件中传递参数时,应该使用bind而不是直接传递参数并再次绑定。onChange={this.setDesc.bind(this, i)}
整个代码如下:
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 (); } render() { return ( ...); } }
你也可以使用箭头函数来传递参数,如下所示:onChange={(e) => this.setDesc(e, i)}
这实际上与不绑定函数是相同的。但是你需要将_renderPriceRow函数也绑定一下,因为它使用了this
作为调用setCount
函数的引用,如果不绑定,函数中的this
将指向函数本身的上下文,而不是组件的上下文。这是因为在ES5之前,函数是不需要绑定的。
问题的出现原因是在React中传递多个参数给事件处理程序时,需要使用bind方法来绑定函数。解决方法是在构造函数中使用bind方法来绑定函数,并在需要传递额外参数的函数中使用箭头函数或bind方法来绑定函数。另外,需要注意的是在更新state值时,不能直接修改state变量,而是需要创建一个副本进行修改,并使用setState方法来更新值。
以下是解决方法的具体步骤:
1. 在onChange方法中使用bind方法来绑定函数,并传递额外参数。
2. 在构造函数中移除对应的bind语句。
3. 对于不需要额外参数的函数,可以在构造函数中使用bind方法来绑定函数。
4. 对于需要传递额外参数的函数,使用箭头函数或bind方法来绑定函数。
5. 在更新state值时,不要直接修改state变量,而是创建一个副本进行修改,并使用setState方法来更新值。
最后,需要注意的是在构造函数中绑定_renderPriceRow函数,以解决之前的错误。具体方法是在构造函数中添加一行代码:this._renderPriceRow = this._renderPriceRow.bind(this)。