React——第二篇，添加实例_如何在react中添加实例在所有react实力都可以用-优快云博客

本文链接：https://blog.youkuaiyun.com/Front_ends/article/details/103275804

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// 引入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的个人理解，很多不懂的，请求指教！！！