## 一、實現搜索聯想  ~~~ var SearchItem = React.createClass({ render: function() { var text = ''; Object.keys(this.props.data).forEach(function(v) { text += ' '+this.props.data[v]; }.bind(this)); return ( <li>{text}</li> ); } }); var SearchLx = React.createClass({ getInitialState: function() { return { data: [ {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"} ], filterData: [], isStocked: false }; }, handleInput: function(e) { var val = e.target.value, resultArr = []; resultArr = this.state.data.filter(function(v) { if(new RegExp('^'+val, 'i').test(v.category) && v.stocked===this.state.isStocked) { return v; } }.bind(this)); this.setState({ filterData: val?resultArr:[] }); }, handleCheckbox: function(e) { var val = this.refs.input.value, resultArr = []; resultArr = this.state.data.filter(function(v) { if(new RegExp('^'+val, 'i').test(v.category) && v.stocked===e.target.checked) { return v; } }.bind(this)); this.setState({ filterData: val?resultArr:[], isStocked: e.target.checked }); }, render: function() { var ListItems = this.state.filterData.map(function(v) { return ( <SearchItem data={v} /> ); }); return ( <div> <input type="text" onChange={this.handleInput} ref="input"/> <input type="checkbox" id="stocked" defaultChecked={this.state.isStocked} onChange={this.handleCheckbox}/> <label htmlFor="stocked">stocked</label> <ul>{ListItems}</ul> </div> ); } }); ReactDOM.render(<SearchLx/>, document.body); ~~~