3

我正在学习在 React 中思考，但不明白为什么示例中的 SearchBar 需要具有value={this.props.filterText}and checked={this.props.inStockOnly}，jsFiddle 在没有它们的情况下仍然可以工作，并且将道具传递给 SearchBar 没有意义，因为 Search 是处理用户输入并更改状态的一种。用户输入将反映在输入的值中，而没有设置为this.props.filterText那为什么会存在呢？

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

3 回答 3

1

React 有受控组件的概念。受控组件意味着其值由状态设置（而不是相反，即状态由组件的值设置）。

考虑以下示例：

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = {term : ''};
    }
    render() {
        return (
            <div>
            <input value={this.state.term} onChange = {event => this.setState({term : event.target.value}) }/>
            </div>
        );
    }
}

在上面的例子<SearchBar />中是一个受控组件。

以下将是事件的顺序：

  1. 您在输入字段中键入“abc”。
  2. 此时输入字段的值不会改变。相反，由于我们在onChangeEvent 中的代码，组件的状态正在发生变化。
  3. 随着组件状态的改变，组件会再次被渲染。现在组件的值变成了'abc'。

当我们使用 redux、Actions 等时，这个概念变得更加重要。

于 2016-10-06T03:42:58.337 回答
0

此处的示例描述了使用来自父组件的受控输入。正如你看到的

<input
      type="text"
      placeholder="Search..."
      value={this.props.filterText}
      ref="filterTextInput"
      onChange={this.handleChange}
    />

这里输入框的值设置为，{this.props.value}并且在handlechange函数中，您是onUserInput您检查的函数，再次作为道具传递给Searchbar. 这会调用组件的 handleUserInput函数 ni FilterableProductTable并设置状态filterText, inStockOnly，并且只有这些状态作为道具传递给Searchbar组件。因此，尽管您可以不使用它，但在大多数情况下，受控输入是可行的方法，因为我们正在接受用户提供的值并更新<input>组件的 value 属性。这种模式很容易实现interfaces that respond to or validate user interactions。即，如果您想验证输入字段或对输入值施加限制，则使用受控输入更容易

于 2016-10-06T03:37:03.497 回答
0

因为您将需要从搜索栏到上部组件的输入值。例如，如果您需要根据给定值（通过搜索栏）过滤集合，则过滤将发生在上部组件上，而不是搜索栏上。搜索栏仅用于输入。我们将搜索栏的值放在 props 中，以确保这些值是对齐的。

于 2016-10-06T02:48:46.463 回答