为什么在React思维教程中产品搜索过滤器不起作用?

Why is the product search filter not working in the Thinking in React tutorial

本文关键字：搜索 过滤器 不起作用 React 教程 为什么      更新时间：2023-09-26

我正在尝试学习ReactJs，并开始遵循官方文档上的教程。由于某种原因，step4之后的搜索过滤器文本框似乎是只读的。它没有接收我输入的任何文本。这里的问题是什么?

这是教程的链接——https://facebook.github.io/react/docs/thinking-in-react.html

看起来搜索栏呈现的方式有一些问题。但是我不知道它是什么。

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

https://jsfiddle.net/reactjs/zafjbw1e/?utm_source=website& utm_medium = embed& utm_campaign = zafjbw1e

如果你看第5步，他们会告诉你为什么这不起作用。它们通过onChange内部的函数来实现这一点。记住:React完全是关于组件层次结构的单向数据流。所以你传递给组件的props来自于父组件。如果你读得深入，他们会教你心流是如何运作的。;)

希望能帮到你;)

PS是只读的，因为值props是空字符串;)因为你没有推到顶部的新状态，所以你没有改变它。

var FilterableProductTable = React.createClass({
  getInitialState: function() {
    return {
      filterText: '', // HERE AM EMPTY AND YOU DONT PASS NEW STATE SO I STAY EMPTY
      inStockOnly: false
    };
  },
  render: function() {
    return (
      <div>
        <SearchBar
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
        />
        <ProductTable
          products={this.props.products}
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
        />
      </div>
    );
  }
});

<input>是一个所谓的受控元件，简单地说，输入栏内的值被<input>元素的value属性所控制，因此只能通过设置value属性来改变该值。试着改变value={this.props.filterText}来value={"aa"}你就会明白我的意思。只要遵循教程，一切都会好的

相关文章：