CODEWITHSUNDEEP
reactjs
Moon
Moon

Reputation: 35265

Unable to bind onChange function in React

I am sure I am missing something fairly simple here. Yet, still having hard time figuring it out.

I am trying to execute the findItem function when a value for the url input changes. With the code below, I get this warning in Chrome:

Warning: Failed propType: Invalid prop `onChange` of type `string` supplied to `ReactDOMInput`, expected `function`. Check the render method of `ItemForm`.

Here is the related code:

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>
    );
  }
});

Upvotes: 2

Views: 2253

Answers (1)

yangli-io
yangli-io

Reputation: 17334

you need to remove the quotation marks

onChange={this.findItem}

Upvotes: 8

Related Questions