Reactjs 搜索 json

Question

通过thinking in react 博客后，我正在尝试实现类似的东西。但与其过滤数组表，我宁愿它显示包含输入值的行？

我有一个我尝试过的 jsfiddle jsfiddle example 我只想显示与输入值匹配的产品名称。

这是我的代码

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

您的 FilterableProfileTable render() 方法应如下所示

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