Javascript Reactjs搜索json

在浏览完博客之后，我正在尝试实现类似的东西。但是我宁愿它显示包含输入值的行，而不是过滤数组表

我有很多我尝试过的东西，我只想显示与输入值匹配的产品名称

这是我的密码

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

var SearchBox=React.createClass({
handleChange:function（）{
this.props.onUserInput（this.refs.filterInput.value）；
},
渲染：函数（）{
返回(
);
}
});
var FilterableProfileTable=React.createClass({
getInitialState:函数（）{
返回{
筛选器文本：“”，
秀：真的
};
},
handleUserInput：函数（filterText）{
这是我的国家({
filterText:filterText，
节目：假
});
},
渲染：函数（）{
if（this.state.show）{
返回(
你好
)
}否则{
返回(
{this.props.products[0].name}
);
}
}
})
var SearchPage=React.createClass({
渲染：函数（）{
返回(
);
}
});
var乘积=[
{类别：'体育用品'，价格：'$49.99'，库存：真实，名称：'足球'}，
{类别：'体育用品'，价格：'$9.99'，库存：真实，名称：'棒球'}，
{类别：'体育用品'，价格：'$29.99'，库存：假，名称：'篮球'}，
{类别：'Electronics'，价格：'99.99美元'，库存：真实，名称：'iPod Touch'}，
{类别：'Electronics'，价格：'399.99美元'，库存：假，名称：'iphone5'}，
{类别：'Electronics'，价格：'$199.99'，库存：true，名称：'Nexus 7'}
];
ReactDOM.render(
,
document.getElementById（'容器'）
);

您可以使用来实现这一点

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

render:function（）{
让selectedProduct=this.props.products.find（product=>product.name==this.state.filterText）；
返回此.state.show
? (
你好
)
: (
{selectedProduct&&selectedProduct.name}
{selectedProduct&&selectedProduct.stock}
{selectedProduct&&selectedProduct.price}
{selectedProduct&&selectedProduct.category}
)
}

---

什么不起作用？它正在工作，它当前正在匹配确切的名称，如果您想要“部分”匹配，您可以使用

includes（）

而不是

=

，就像这样抱歉，它工作了。。使用json url中的真实数据而不是硬编码的json数组如何？使用xhr或get from