React 实例-深入理解

React 实例-深入理解
html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <script src="https://fb.me/react-0.13.3.js"></script>
        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
    <body>
        <script type="text/jsx">
        // 分类
        var ProductCategoryRow = React.createClass({
            render: function() {
                return (<tr><th colSpan="2">{this.props.category}</th></tr>);
            }
        });

        // 产品名称和价格
        var ProductRow = React.createClass({
            render: function() {
                // 无库存的用红色
                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>
                );
            }
        });

        // 产品列表
        // 基于 state 过滤列表
        var ProductTable = React.createClass({
            render: function() {
                var rows = [];
                var lastCategory = null;

                this.props.products.forEach(function(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;
                }.bind(this));

                return (
                    <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>{rows}</tbody>
                    </table>
                );
            }
        });

        // 筛选框
        var SearchBar = React.createClass({
            handleChange: function() {
                // 输入筛选条件时 将输入加入 props
                this.props.onUserInput(
                    this.refs.filterTextInput.getDOMNode().value,this.refs.inStockOnlyInput.getDOMNode().checked
                );
            },render: function() {
                return (
                    <form>
                    <input type="text" placeholder="Search..." value={this.props.filterText} ref="filterTextInput" onChange={this.handleChange} />
                    <p>
                    <input type="checkbox" checked={this.props.inStockOnly} ref="inStockOnlyInput" onChange={this.handleChange} />
                    Only show products in stock
                    </p>
                    </form>
                );
                }
        });

        // 显示搜索结果
        var FilterableProductTable = React.createClass({
            // 设置 state 作为 props 传递给 SearchBar 和 ProductTable
            getInitialState: function() {
                return {
                    filterText: '',inStockOnly: false
                };
            },handleUserInput: function(filterText,inStockOnly) {
                this.setState({
                    filterText: filterText,inStockOnly: inStockOnly
                });
            },render: function() {
                return (
                    <div>
                        <SearchBar
                            filterText={this.state.filterText}
                            inStockOnly={this.state.inStockOnly}
                            onUserInput={this.handleUserInput}
                        />
                        <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'},{category: 'Sporting Goods',price: '$9.99',name: 'Baseball'},price: '$29.99',stocked: false,name: 'Basketball'},{category: 'Electronics',price: '$99.99',name: 'iPod Touch'},price: '$399.99',name: 'iPhone 5'},price: '$199.99',name: 'Nexus 7'}
        ];

        React.render(<FilterableProductTable products={PRODUCTS} />,document.body);
    </script>
</body>
</html>
React 实例-深入理解

相关推荐
