Question

我正在学习Think in React，但不明白为什么示例中的SearchBar需要value={this.props.filterText}和checked={this.props.inStockOnly}，jsFiddle仍可以在没有它们的情况下运行并且将道具传递给SearchBar没有意义，因为搜索是处理用户输入并对状态进行更改的。用户输入将反映在输入值中，而不会设置为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>
    );
  }
});

Answer 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 />是受控组件。

以下是事件序列：

您在输入字段中输入'abc'。
此时输入字段的值不会改变。相反，组件状态正在发生变化，因为onChange事件中的代码。
随着组件状态的更改，组件将再次呈现。现在组件的价值变成'abc'。

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

Answer 2

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

Answer 3

此处的示例描述了使用父组件的受控输入。如你所见

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

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

将道具传递给React搜索栏的目的是什么？

3 个答案: