Блог

Я пытаюсь изучить ReactJS и начал следовать руководству по официальной документации. По какой-то причине текстовое поле фильтра поиска после шага 4, похоже, доступно только для чтения. Он не принимает ни одного введенного мной текста. В чем здесь проблема?

Вот ссылка на учебное пособие — 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=websiteamp;utm_medium=embedamp;utm_campaign=zafjbw1e

Если вы посмотрите на шаг 5, они покажут вам, почему это не работает. Они отвечают на это с помощью функции внутри onChange. Помните: React — это односторонний поток данных вниз по иерархии компонентов. Таким образом, реквизиты, которые вы передаете своему компоненту, поступают от родительского элемента. Если вы будете читать дальше, они научат вас, как работает поток.

Надеюсь, это может помочь

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> это так называемый контролируемый компонент .Проще говоря, значение внутри панели ввода контролируется value свойством <input> элемента, поэтому вы можете изменить значение, только установив value свойство, попробуйте изменить value={this.props.filterText} , чтобы value={"aa"} вы поняли, что я имею в виду.Просто продолжайте следовать руководству, все должно быть хорошо