无法在 React 中绑定 onChange 函数
Unable to bind onChange function in React
我确定我在这里遗漏了一些相当简单的东西。然而,仍然很难弄清楚。
我正在尝试在 url
输入的值发生变化时执行 findItem
函数。使用下面的代码,我在 Chrome:
中收到此警告
Warning: Failed propType: Invalid prop `onChange` of type `string` supplied to `ReactDOMInput`, expected `function`. Check the render method of `ItemForm`.
相关代码如下:
ItemForm = React.createClass({
findItem(event) {
console.log(event.target.value);
},
render() {
return (
<tfoot>
<tr className="ui form">
<td>
<div className="field">
<label>Product URL</label>
<div className="ui active small inline invisible loader"/>
<input className="url" onChange="{this.findItem}" placeholder="Enter the URL of the product you wish to purchase" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Quantity</label>
<input className="qty" disabled="disabled" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Total Cost</label>
<div className="ui labeled input">
<div className="ui label">$</div>
<input disabled="disabled" type="text"/>
</div>
</div>
</td>
</tr>
<tr className="ui form">
<td>
<div className="fields">
<div className="eight wide field title">
<label>Product Title</label>
<textarea disabled="disabled" rows="2"/>
</div>
<div className="eight wide field">
<label>Optional Comments</label>
<textarea disabled="disabled" rows="2"/>
</div>
</div>
</td>
<td/>
<td className="btn">
<button className="ui disabled positive button">Add</button>
</td>
</tr>
</tfoot>
);
}
});
您需要删除引号
onChange={this.findItem}
我确定我在这里遗漏了一些相当简单的东西。然而,仍然很难弄清楚。
我正在尝试在 url
输入的值发生变化时执行 findItem
函数。使用下面的代码,我在 Chrome:
Warning: Failed propType: Invalid prop `onChange` of type `string` supplied to `ReactDOMInput`, expected `function`. Check the render method of `ItemForm`.
相关代码如下:
ItemForm = React.createClass({
findItem(event) {
console.log(event.target.value);
},
render() {
return (
<tfoot>
<tr className="ui form">
<td>
<div className="field">
<label>Product URL</label>
<div className="ui active small inline invisible loader"/>
<input className="url" onChange="{this.findItem}" placeholder="Enter the URL of the product you wish to purchase" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Quantity</label>
<input className="qty" disabled="disabled" type="text"/>
</div>
</td>
<td className="numeric">
<div className="field">
<label>Total Cost</label>
<div className="ui labeled input">
<div className="ui label">$</div>
<input disabled="disabled" type="text"/>
</div>
</div>
</td>
</tr>
<tr className="ui form">
<td>
<div className="fields">
<div className="eight wide field title">
<label>Product Title</label>
<textarea disabled="disabled" rows="2"/>
</div>
<div className="eight wide field">
<label>Optional Comments</label>
<textarea disabled="disabled" rows="2"/>
</div>
</div>
</td>
<td/>
<td className="btn">
<button className="ui disabled positive button">Add</button>
</td>
</tr>
</tfoot>
);
}
});
您需要删除引号
onChange={this.findItem}