react练习

最新推荐文章于 2024-07-06 10:21:35 发布

weixin_38325679

最新推荐文章于 2024-07-06 10:21:35 发布

阅读量57

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_38325679/article/details/128719097

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <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">

        class App extends React.Component {

            // 初始化状态
            state = {
                todos:[
                    'A',
                    'B',
                    'C',
                    'D'
                ]
            }

            //向todos 中添加todo
            addTodo = (todo) => {
                // 得到状态数据todos
                const {todos} = this.state
                // 跟新状态数据
                todos.unshift(todo)
                //更新状态
                this.setState({
                    todos
                })
            }

            render () {
                console.log('App render()')
                // 读取内部状态数据
                const {todos} = this.state

                return (
                    <div>
                        <h1>TODO LIST</h1>
                        <Add size={todos.length} addTodo={this.addTodo}/>
                        <List todos={todos}/>
                    </div>
                )
            }
        }

        class Add extends React.Component {

            static propType = {
                size: PropTypes.number.isRequired,
                addTodo: PropTypes.func.isRequired
            }

            addTodo = () => {
                // 1.得到输入的todo
                const todo = this.refs.todo.value
                // 2.将todo添加到todos中
                this.props.addTodo(todo)
                //3.清除输入
                this.refs.todo.value = ''
            }

            render () {

                const {size} = this.props

                return (
                    <div>
                        <input type="text" ref="todo"/>
                        <button onClick={this.addTodo}>Add #{size}</button>
                    </div>
                )
            }
        }

        class List extends React.Component {

            // 声明接收哪些标签属性
            static propTypes = {
                todos: PropTypes.array.isRequired
            }

            render () {
                // 读取外部传输的属性数据
                const {todos} = this.props

                return (
                    <ul>
                        {
                            todos.map((todo, index) => {
                                return <li key={index}>{todo}</li>
                            })
                        }
                    </ul>
                )
            }
        }

        ReactDOM.render(<App/>, document.getElementById('example'))

    </script>
<body>

</body>
</html>