所以我试图使反应与ES6语法一起工作。在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 ( <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> ); } }
这是错误…
PriceTable.jsx:21 Uncaught ReferenceError: i is not defined at new PriceTable (PriceTable.jsx:21)
您绑定的功能不正确
在构造函数中,您无需指定参数,只需要像 this.setDesc = this.setDesc.bind(this);
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 ( <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> ); } }
您还可以利用 Arrow函数 来传递类似
onChange={(e) => this.setDesc(e, i)}