无法在React中绑定onChange函数

Question

我相信我在这里错过了一些相当简单的东西.然而,仍然很难搞清楚.

我正在尝试findItem在url输入值更改时执行该函数.使用下面的代码,我在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>
    );
  }
});

Answer 1

你需要删除引号

onChange={this.findItem}