Javascript 向React搜索栏传递道具的目的是什么？

我正在学习，但不明白为什么示例中的搜索栏需要

值={this.props.filterText}

和

选中={this.props.inStockOnly}

，JSFIDLE在没有它们的情况下仍然可以工作，将道具传递到搜索栏是没有意义的，因为搜索是处理用户输入并更改状态的搜索。用户输入将反映在输入值中，而不将其设置为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>
    );
  }
});

var SearchBar=React.createClass({
handleChange:function（）{
这个.props.onUserInput(
this.refs.filtertextireput.value，
this.refs.inStockOnlyInput.checked
);
},
render:function（）{
返回(

{' '}
只展示库存产品

);
}
});

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

这里的示例描述了来自父组件的受控输入的使用。如你所见

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

---

在这里，输入框的值设置为

{this.props.value}

，在

handlechange

函数中，您选中的

onUserInput

函数再次作为一个属性传递到

搜索栏

。这将调用

FilterableProductTable

组件中的

handleUserInput

函数，并设置状态

filterText、inStockOnly

，只有这些状态作为道具传递给

搜索栏

组件。因此，尽管您可以不使用它，但在大多数情况下，控制输入是一种方式，因为我们接受用户提供的值并更新

组件的值属性。此模式使实现响应或验证用户交互的

接口变得容易。i、 e.如果您想要验证输入字段或对输入值进行限制，那么使用受控输入就更容易了。受控组件意味着其值由状态设置（而不是相反，即状态由组件值设置）

考虑以下示例：

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

类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={term:'}；
}
render（）{
返回(
this.setState（{term:event.target.value}）}/>
);
}
}

在上面的示例中，
是一个受控组件

以下是事件的顺序：

在输入字段中键入“abc”
此时，输入字段的值不变。相反，组件的状态正在改变，因为我们在
onChange
事件中的代码
随着组件状态的更改，将再次渲染该组件。现在，组件的值变为“abc”
当我们使用redux、Actions等时，这个概念变得更加重要。
您的观点非常重要。这个例子让人困惑，但是如果您想用父级的默认值（如
）实例化搜索栏，那么在那里放置这些道具仍然很有用，但是为什么要按状态设置呢？这对redux有什么好处？我不确定我是否理解你的问题。若你们的意思是为什么状态和道具，这可能会有帮助：“‘为什么你们希望它被状态设定’”——我认为在这个例子中，它只是用来解释受控组件的概念，而不是其他任何东西。这是React中非常重要的概念。我想当你阅读更多关于redux、actions等的内容时，你会更欣赏这一点，但是这个值已经对齐了，因为用户已经在搜索栏中输入了这个值，为什么它需要进入状态，然后返回到搜索栏？为什么这样做？您可以通过handleChange通过react组件本身验证用户交互，对吗？为什么要一直到州政府，然后再回来进行验证？当然你可以做到。然而，受控输入还有一个优势。如果您在代码中的多个位置呈现输入值，或者在多个位置使用输入值，那么这很容易。无论如何，这只是处理输入更改的一种方法，可以有多种方法。你的建议也是正确的。