React——第二篇，添加实例

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

原创最新推荐文章于 2024-10-19 19:03:11 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#第二篇React

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用React实现的状态管理实例，通过组件内部的方法控制state的更新，展示了如何使用输入框与按钮来动态添加用户信息，并实时更新列表。文章详细解释了constructor、setState以及bind的使用方法。


// 引入react
import React,{Component,Fragment} from 'react';

class APP extends Component{
    // 这是它自己的一个方法，一般不调用就隐藏调用的，如果自己添加this.state={}内容进入时，则我们手动写入。super(props)改变它的this指向
    constructor(props){
        super(props);
        this.state={
            name:'',
            age:'',
            sex:'',
            userInfo:[
                { name:'刘华',age:'11',sex:'男'}
            ]
        }
    }
    // 绑定的一个函数onChange1
    onChange1 = (e) =>{
        this.setState({
            name:e.target.value
        })
    }
    onChange2 = (e) =>{
        this.setState({
            age:e.target.value
        })
    }
    onChange3 = (e) =>{
        this.setState({
            sex:e.target.value
        })
    }

    // Button添加的函数Add
    Add =(e) =>{
        this.setState({
            userInfo:[...this.state.userInfo,{ name:this.state.name,age:this.state.age,sex:this.state.sex}],
            name:'',
            age:'',
            sex:''
        })
    }
    render(){
        return(
            <Fragment>
                <div>
                    {/* input 的一个双向绑定 */}
                    <div>姓名：<input value={this.state.name}  onChange={this.onChange1} /> 年龄：<input value={this.state.age}  onChange={this.onChange2} /> 性别：<input value={this.state.sex}  onChange={this.onChange3} /> <button onClick={this.Add}>新增</button></div>
                    <ul>
                        {this.state.userInfo.map((item,index)=>
                            <li key={index}>{item.name}__{item.age}__{item.sex}</li> 
                        )}
                    </ul>
                </div>
            </Fragment>
        )
    }
}

// 导出APP主键
export default APP;


 * 以上为新人对react的个人理解，很多不懂的，请求指教！！！