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機能では、あなたが再び Searchbarに小道具として渡されるチェック onUserInput機能があります。これは、 FilterableProductTableコンポーネントの handleUserInput関数を呼び出し、状態は filterText, inStockOnlyに設定され、これらはサブコンポーネントとして Searchbarコンポーネントに渡されます。したがって、ユーザーが提供する値を受け入れて、 <input>コンポーネントの値propを更新するので、ほとんどの場合、制御された入力が行える方法です。このパターンにより、 interfaces that respond to or validate user interactionsの実装が容易になります。すなわち、入力フィールドを検証したり、入力値に制限を加える場合は、入力を制御する方が簡単です。

Answer 3

リアクションには制御されたコンポーネントの概念があります。制御されたコンポーネントは、その値が状態によって設定されることを意味する（それ以外の方法ではない。すなわち、状態はコンポーネントの値によって設定される）。 <SearchBar />が制御コンポーネントである上記の例で

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

：

は、以下の例を考えます。あなたが入力フィールドに 'ABC' と入力

1. ：

   一連のイベントになります後。

2. 入力フィールドの値は変更されません。むしろ、コンポーネントの状態は、onChangeイベントのコードのために変化しています。
3. コンポーネントの状態が変化すると、コンポーネントが再びレンダリングされます。そして今、コンポーネントの値は 'abc'になります。

この概念は、私たちがReduxの使用時に、アクションなど