Javascript 父组件回调如何通过子道具接收参数顺序/值？

刚刚通过facebook文档中的官方信息。 除了一点之外，本教程中的所有内容都有意义。我不明白FilterableProductTable的（父组件）回调函数handleUserInput如何正确地接收其参数的顺序，或者参数值如何通过搜索栏（子组件）传递到回调函数中，而只是设置其组件函数中的道具

FilterableProductTable的回调函数为：

handleUserInput: function(filterText, inStockOnly) {
  this.setState({
    filterText: filterText,
    inStockOnly: inStockOnly
  });
}

搜索栏设置的道具组件功能：

handleChange: function() {
  this.props.onUserInput(
    this.refs.filterTextInput.value,
    this.refs.inStockOnlyInput.checked
  );
}

如果您从未阅读过本教程，或者没有访问上面的github链接，以下是本教程的最终代码：

var ProductCategoryRow = React.createClass({
  render: function() {
    return (<tr><th colSpan="2">{this.props.category}</th></tr>);
  }
});

var ProductRow = React.createClass({
  render: function() {
    var name = this.props.product.stocked ?
      this.props.product.name :
      <span style={{color: 'red'}}>
        {this.props.product.name}
      </span>;
    return (
      <tr>
        <td>{name}</td>
        <td>{this.props.product.price}</td>
      </tr>
    );
  }
});

var ProductTable = React.createClass({
  render: function() {
    var rows = [];
    var lastCategory = null;
    this.props.products.forEach(function(product) {
      if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
        return;
      }
      if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
      }
      rows.push(<ProductRow product={product} key={product.name} />);
      lastCategory = product.category;
    }.bind(this));
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

var SearchBar = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.filterTextInput.value,
      this.refs.inStockOnlyInput.checked
    );
  },
  render: function() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          ref="filterTextInput"
          onChange={this.handleChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            ref="inStockOnlyInput"
            onChange={this.handleChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
});

var FilterableProductTable = React.createClass({
  getInitialState: function() {
    return {
      filterText: '',
      inStockOnly: false
    };
  },

  handleUserInput: function(filterText, inStockOnly) {
    this.setState({
      filterText: filterText,
      inStockOnly: inStockOnly
    });
  },

  render: function() {
    return (
      <div>
        <SearchBar
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
          onUserInput={this.handleUserInput}
        />
        <ProductTable
          products={this.props.products}
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
        />
      </div>
    );
  }
});


var PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
  document.getElementById('container')
);

var ProductCategoryRow=React.createClass({
render:function（）{
返回（{this.props.category}）；
}
});
var ProductRow=React.createClass({
render:function（）{
变量名称=this.props.product.stocked？
this.props.product.name：
{this.props.product.name}
;
返回(
{name}
{this.props.product.price}
);
}
});
var ProductTable=React.createClass({
render:function（）{
var行=[]；
var lastCategory=null；
this.props.products.forEach（函数（产品）{
if（product.name.indexOf（this.props.filterText）==-1 | |（！product.stocked&&this.props.inStockOnly））{
返回；
}
if（product.category！==lastCategory）{
rows.push（）；
}
rows.push（）；
lastCategory=product.category；
}.约束（这个）；
返回(
名称
价格
{rows}
);
}
});
var SearchBar=React.createClass({
handleChange:function（）{
这个.props.onUserInput(
this.refs.filtertextireput.value，
this.refs.inStockOnlyInput.checked
);
},
render:function（）{
返回(

{' '}
只展示库存产品

);
}
});
var FilterableProductTable=React.createClass({
getInitialState:函数（）{
返回{
筛选器文本：“”，
inStockOnly:错误
};
},
handleUserInput:函数（filterText，仅Instock）{
这是我的国家({
filterText:filterText，
inStockOnly：inStockOnly
});
},
render:function（）{
返回(
);
}
});
var乘积=[
{类别：'体育用品'，价格：'$49.99'，库存：真实，名称：'足球'}，
{类别：'体育用品'，价格：'$9.99'，库存：真实，名称：'棒球'}，
{类别：'体育用品'，价格：'$29.99'，库存：假，名称：'篮球'}，
{类别：'Electronics'，价格：'99.99美元'，库存：真实，名称：'iPod Touch'}，
{类别：'Electronics'，价格：'399.99美元'，库存：假，名称：'iphone5'}，
{类别：'Electronics'，价格：'$199.99'，库存：true，名称：'Nexus 7'}
];
ReactDOM.render(
,
document.getElementById（'容器'）
);

您在

搜索栏上看到的组件
输入有一个onchange处理程序
onChange={this.handleChange}
。让我们看看
handleChange
方法

handleChange: function() {
    this.props.onUserInput(
        this.refs.filterTextInput.value,
        this.refs.inStockOnlyInput.checked
    );
},

然后，
handleChange
方法按顺序发送
onUserInput
参数

您可以在
SearchBar
组件
inputs
上看到一个onchange处理程序
onChange={this.handleChange}
。让我们看看
handleChange
方法

handleChange: function() {
    this.props.onUserInput(
        this.refs.filterTextInput.value,
        this.refs.inStockOnlyInput.checked
    );
},

然后，
handleChange
方法按顺序发送
onUserInput
参数

handleUserInput
函数作为道具通过

   <SearchBar
      filterText={this.state.filterText}
      inStockOnly={this.state.inStockOnly}
      onUserInput={this.handleUserInput}
    />

您将看到
SearchBar
handleChange
函数调用
onUserInput
并将参数传递给它，这间接意味着将参数传递给
handleUserInput
函数。
handleUserInput
函数通过

   <SearchBar
      filterText={this.state.filterText}
      inStockOnly={this.state.inStockOnly}
      onUserInput={this.handleUserInput}
    />

您将看到
SearchBar
handleChange
函数调用
onUserInput
并将参数传递给它，这间接意味着将参数传递给
handleUserInput
函数。
您的问题是
refs
如何在react中工作？您的问题是
refs
如何在react中工作？