2019/12/30页面没有刷新？？？

最新推荐文章于 2023-03-11 22:10:19 发布

weixin_44337220

最新推荐文章于 2023-03-11 22:10:19 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_44337220/article/details/103770895

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

<div id="example1"></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/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">

    /*
    问题：数据保存在哪个组件内？
        看事件是某个组件需要（给子），还是某些组件需要（给父）
    问题2:需要在子组件中该表父组件状态
            子组件不能直接改变父组件内容
        
        状态在那个组件，更新状态的行为就应该定义在那个组件
    */
    class App extends React.Component{

        constructor(props){
            super(props)
            // 初始化状态
            this.state={
                todos:['吃饭',"ddd","78787",'555']
            }
            this.addTodo=this.addTodo.bind(this)
        }

        addTodo(todo){
            //将新项添加到数组起始位置 unshift
            // this.state.todos.unshift(todo)  不能这么做???? 要想更新状态必须调用setState
            const {todos} =this.state
            console.log((todos))
            todos.unshift(todo)
            // 跟新状态 真正更新（同一出口）
            this.setState=({todos})
            console.log('---------3--')
            console.log(todos)
            console.log('--------3---')
        }

        render(){
            const {todos}=this.state
            return(
                <div>
                    <h1>Simple TODO List</h1>
                    <Add count={todos.length} addTodo={this.addTodo}/>
                    <List todos={todos}/>
                </div>
            )
        }
    }


    class Add extends React.Component{

        constructor (props){
            super(props)
            this.add=this.add.bind(this)
        }

        add(){
            // 1.读取输入的数据 trim()去除两边空格
            const todo=this.todoInput.value.trim()
            console.log('-----------')
            console.log(todo)
            console.log('-----------')
            // 2.检查合法性
            if (!todo){
                return
            }

            // 3.添加
            this.props.addTodo(todo)
            console.log(this.props)

            //
        }


        render(){
            return(
                <div>
                    <input type="text" ref={input => this.todoInput=input}/>
                    <button onClick={this.add}>#add{this.props.count+1}{this.props.count}</button>
                </div>
            )
        }
    }
    Add.propTypes={
        count:PropTypes.number.isRequired,
        addTodo:PropTypes.func.isRequired,
    }

    class List extends React.Component{
        render(){
            const {todos}=this.props
            console.log('0000')
            console.log(todos)
            console.log('0000')
            return(
                <ul>
                    {
                        todos.map((todo,index) => { return<li key={index}>{todo}</li> })
                        //{}代表函数体必须有return =>代表函数跟return
                        // map() js中Array的函数，返回新数组
                        //array.map(function(currentValue, index, arr), thisIndex)
                        //数组中元素为原始数组调用函数处理后的值
                    }
                </ul>
            )
        }
    }
    List.propTypes={
        todos:PropTypes.array.isRequired
    }

    ReactDOM.render(<App />,document.getElementById('example1'))
</script>
</body>
</html>