代码

Question

enter image description here这是此代码的输出我需要更正的代码，当我点击复选框按钮时，它应该返回值为是否为

        
        class ProductCategoryRow extends React.Component {
          render() {
            return (<tr><th colSpan="2">{this.props.category}</th></tr>);
          }
        }
        
        class ProductRow extends React.Component {
          render() {
            var name = this.props.product.stocked?
                this.props.product.name:
            this.props.product.name;
                 return (
              <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
                 <td>{this.props.product.available}</td>
              </tr>
            );
          }
        }
            
        
        
            class ProductTable extends React.Component {
              render() {
                var rows = [];
                var lastCategory = null;
                console.log(this.props.inStockOnly)
                this.props.products.forEach((product) => {
                  if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
                    return;
                  }
                  if (product.category !== lastCategory) {
                    rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
                  }
                  rows.push(<ProductRow product={product} key={product.name} />);
                  lastCategory = product.category;
                });
                return (
                  <table>
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>available</th>
                      </tr>
                    </thead>
                    <tbody>{rows}</tbody>
                  </table>
                );
              }
            }
        
        
            class SearchBar extends React.Component {
              constructor(props) {
                super(props);
                this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
                this.handleInStockInputChange = this.handleInStockInputChange.bind(this);
              }
              
              handleFilterTextInputChange(e) {
                this.props.onFilterTextInput(e.target.value);
              }
              
              handleInStockInputChange(e) {
                this.props.onInStockInput(e.target.checked);
              }
              
              render() {
                return (
                  <form>
                    <input
                      type="text"
                      placeholder="Search..."
                      value={this.props.filterText}
                      onChange={this.handleFilterTextInputChange}
                    />
                    <p>
                      <input
                        type="checkbox"
                        checked={this.props.inStockOnly}
                        onChange={this.handleInStockInputChange}
                      />
                      {' '}
                      Only show products with available
                    </p>
                  </form>
                );
              }
            }
        
        
        
            class FilterableProductTable extends React.Component {
                  constructor(props) {
                    super(props);
                    this.state = {
                      filterText: '',
                      inStockOnly: false
                    };
                    
                    this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
                    this.handleInStockInput = this.handleInStockInput.bind(this);
                  }
                
                  handleFilterTextInput(filterText) {
                    this.setState({
                      filterText: filterText
                    });
                  }
                  
                  handleInStockInput(inStockOnly) {
                    this.setState({
                      inStockOnly: inStockOnly
                    })
                  }
                
                  render() {
                    return (
                      <div>
                        <SearchBar
                          filterText={this.state.filterText}
                          inStockOnly={this.state.inStockOnly}
                          onFilterTextInput={this.handleFilterTextInput}
                          onInStockInput={this.handleInStockInput}
                        />
                        <ProductTable
                          products={this.props.products}
                          filterText={this.state.filterText}
                          inStockOnly={this.state.inStockOnly}
                        />
                      </div>
                    );
                  }
                }
                
                
                
        
        
        var PRODUCTS = [
              {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football',available:'yes'},
              {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball',available:'yes'},
              {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball',available:'no'},
              {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch',available:'yes'},
              {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5',available:'yes'},
              {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7',available:'no'}
            ];
        
            
    
    
    ReactDOM.render(
      <FilterableProductTable products={PRODUCTS} />,
      document.getElementById('container')
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id="container" />

问题是，当我点击复选框时，它应该只返回值（名称，价格，可用），其中列包含可用值为“是” 如何在reactjs中实现if函数我在这段代码中收到错误？ 请帮我解决这个问题