React编程思想实例

这份代码是使用React实现根据用户输入的内容筛选列表的需求，这个需求很常见，使用jquery也可以实现，但是需要写很多dom监听事件，很多查找dom然后修改dom的js代码，结构不是很清晰。现在使用React实现，代码如下，可以看到各个模块的功能很清晰，没有查找dom以及给dom绑定事件的语句，如果有bug也很好定位，当然使用React需要理解她的思想，有一些学习成本。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8" />  
<title>React编程思想实例</title>  
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>  
</head>  
<body>  
<div id="root"></div>  
<script type="text/babel">  
  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 :
        <span style={{color: 'red'}}>
          {this.props.product.name}
        </span>;
      return (
        <tr>
          <td>{name}</td>
          <td>{this.props.product.price}</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>
            </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 in stock
          </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: 'xutongbao'},
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: '徐同保'},
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: '星河'},
    {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(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('root')
  );
</script>  
</body>  
</html>

备注：欢迎加入web前端求职招聘qq群：668352707

扫描二维码关注公众号，回复： 1694104 查看本文章

React编程思想实例

猜你喜欢