Reactjs検索json

Question

thinking in reactブログを通過した後、私は同様のものを実装しようとしています。代わりに、私はむしろ入力値を含む行を表示するだろうアレイテーブルをフィルタリング？

私は試したことのjsfiddleを持っていますjsfiddle example入力値と一致する製品名を表示したいだけです。

HERESに私のコード

var SearchBox = React.createClass({ 
     handleChange: function() { 
      this.props.onUserInput(this.refs.filterTextInput.value); 
     }, 

     render: function() { 
      return (
       <div> 
        <input 
         type="text" 
         className="form-control" 
         placeholder="Type in someone" 
         value={this.props.filterText} 
         ref="filterTextInput" 
         onChange={this.handleChange}/> 
       </div> 
      ); 
     } 
    }); 

    var FilterableProfileTable = React.createClass({ 
     getInitialState: function() { 
      return { 
       filterText: '', 
       show: true 
      }; 
     }, 

     handleUserInput: function(filterText) { 
      this.setState({ 
       filterText: filterText, 
       show: false 
      }); 
     }, 
     render: function() { 
      if (this.state.show){ 
       return (
        <div> 
        <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/> 
        <h4>hello</h4> 
        </div> 
       ) 
      } else { 
       return (
        <div> 
         <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/> 
         {this.props.products[0].name} 
        </div> 
       ); 
      } 
     } 
    }) 

    var SearchPage = React.createClass({ 
     render: function() { 
      return (
       <div className="searchpage-container"> 
        <div className="search-header"> 
        </div> 
        <div className="col-md-12 searchpage-searchbar-container"> 
         <div className="col-md-5"> 
          <FilterableProfileTable products={PRODUCTS}/> 
         </div> 
         <div className="col-md-2 middle-logo"> 
         </div> 
         <div className="col-md-5"> 
          <FilterableProfileTable products={PRODUCTS}/> 
         </div> 
        </div> 
        <div className="searchpage-homepage-combo"> 
        </div> 
       </div> 
      ); 
     } 
    }); 

    var PRODUCTS = [ 
     {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, 
     {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'}, 
     {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}, 
     {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'}, 
     {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'}, 
     {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'} 
    ]; 

    ReactDOM.render(
     <SearchPage />, 
     document.getElementById('container') 
    ); 

Answer 1

あなたはそれを達成するために、.find()を使用することができます。

let selectedProduct = this.props.products 
         .find(product => product.name === this.state.filterText); 

あなたFilterableProfileTablerender()方法はjsfiddleでこの

render: function() { 
    let selectedProduct = this.props.products.find(product => product.name === this.state.filterText); 
    return this.state.show 
      ? (
       <div> 
        <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/> 
        <h4>hello</h4> 
       </div> 
       ) 
      : (
       <div> 
        <SearchBox filterText={this.state.filterText} onUserInput={this.handleUserInput}/> 
        <div>{selectedProduct && selectedProduct.name}</div> 
        <div>{selectedProduct && selectedProduct.stock}</div> 
        <div>{selectedProduct && selectedProduct.price}</div> 
        <div>{selectedProduct && selectedProduct.category}</div> 
       </div> 
      ) 
} 

jsfiddle