Какова цель передачи реквизитов в панель поиска React?

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

Потому что вам понадобится введенное значение из строки поиска в верхний компонент. Например, если вам нужно отфильтровать коллекцию на основе заданного значения (через строку поиска), фильтрация произойдет на верхнем компоненте, а не на панели поиска. Панель поиска предназначена только для ввода. Мы помещаем значение строки поиска из реквизита, чтобы убедиться, что значения выровнены.

Answer 2

В данном примере показан пример использования управляемого входа от родительского компонента. Как вы видите

<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>. Этот шаблон упрощает реализацию interfaces that respond to or validate user interactions. т. е. если вы хотите проверить правильность ввода поля или наложить ограничения на входное значение, то его легче сделать с управляемым входом

Answer 3

Реакт имеет концепцию контролируемых компонентов. Управляемый компонент означает, что его значение задано по состоянию (а не наоборот, например, состояние, заданное значением компонента).

Рассмотрим следующий пример:

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. В это время значение поля ввода не изменяется. Скорее, состояние компонента меняется из-за нашего кода в onChange Событие.
3. Поскольку состояние компонента изменяется, компонент визуализируется снова. И теперь значение компонента становится «abc».

Это понятие становится более важным, когда мы используем перевождь, действия и т.д.