10-11 组件组合使用_初始化显示/交互

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05_components_composing</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    1)拆分组件: 拆分界面,抽取组件
    2)实现静态组件: 使用组件实现静态页面效果
    3)实现动态组件
        ① 动态显示初始化数据
        ② 交互功能(从绑定事件监听开始)
    */
    /*
    * 问题：数据保存在哪个组件中？
    *   看数据是某个组件需要(给他)，还是某些组件需要(给共同的父组件)
    * 问题2：需要在子组件中改变父组件的状态
    *   状态在哪个组件，更新状态的行为就应该定义在哪个组件
    *   解决：父组件定义函数，传递给子组件，子组件调用
    * */
    // 应用组件
    class App extends React.Component {
        constructor(props) {
            super(props)
            // 初始化状态
            this.state = {
                todos: ['吃饭', '睡觉', '打豆豆']
            }
            this.add = this.add.bind(this)
        }

        add(todo) {
            const {todos} = this.state
            todos.unshift(todo)
            //更新状态
            this.setState({todos})
        }

        render() {
            const {todos} = this.state
            return (
                <div>
                    <TodoAdd add={this.add} count={todos.length}/>
                    <TodoList todos={todos}/>
                </div>
            )
        }
    }

    // 添加todo组件
    class TodoAdd extends React.Component {
        constructor(props) {
            super(props)
            this.addTodo = this.addTodo.bind(this)
        }

        addTodo() {
            // 读取输入数据
            const text = this.input.value.trim()
            // 查检
            if (!text) {
                return
            }
            // 保存到todos
            this.props.add(text)
            // 清除输入
            this.input.value = ''
        }

        render() {
            return (
                <div>
                    <h2>Simple TODO List</h2>
                    <input type="text" ref={input => this.input = input}/>
                    <button onClick={this.addTodo}>Add #{this.props.count}</button>
                </div>
            )
        }
    }

    TodoAdd.propTypes = {
        add: PropTypes.func.isRequired,
        count: PropTypes.number.isRequired
    }

    // todo列表组件
    class TodoList extends React.Component {
        render() {
            const {todos} = this.props
            return (
                <ul>
                    {
                        todos.map((todo, index) => <li key={index}>{todo}</li>)
                    }
                </ul>
            )
        }
    }

    TodoList.propTypes = {
        todos: PropTypes.array.isRequired
    }

    // 渲染应用组件标签
    ReactDOM.render(<App/>, document.getElementById('example'))

</script>
</body>
</html>
10-11 组件组合使用_初始化显示/交互

猜你喜欢
