React从入门到实战-事件处理，受控组件与非受控组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了React从入门到实战-事件处理，受控组件与非受控组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

事件处理

通过onXxx属性指定事件处理函数（注意大小写）
1. React使用的是自定义（合成）事件，而不是使用的原生DOM事件——为了更好的兼容性
2. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素——为了更高效
通过event.target得到发生事件的DOM元素对象

收集表单数据

非受控组件：不能通过代码来控制值，只能通过用户行为操作值，通过DOM节点来处理数据
受控组件：通过React的state作为数据唯一来源，通过变更函数调用setState方法更新数据的表单输入元素。

// 非受控组件
   class Login extends React.Component{
        showData = (event)=>{
            event.preventDefault()//阻止表单提交
            let {username,password } = this
            alert(`你的用户名是：${username.value},你的密码是：${password.value}`)
        }
        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.showData}>
                    <div>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" name="username" ref={(c)=>{this.username = c}}/>
                    </div>
                    <div>
                        <label>密码：</label>
                        <input type='password' placeholder="请输入密码" name="password" ref={(c)=>{this.password = c}}/>
                    </div>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById("test"))

// 受控组件
 class Login extends React.Component{
        state = {
            username:"",
            password:""
        }
        showData = (event)=>{
            event.preventDefault()//阻止表单提交
            let {username,password } = this.state
            alert(`你的用户名是：${username},你的密码是：${password}`)
        }
        setUserName = (e)=>{
            this.setState({
                username:e.target.value
            })
        }
        setPWD = (e)=>{
            this.setState({
                password:e.target.value
            })
        }
        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.showData}>
                    <div>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" name="username" onChange={this.setUserName}/>
                    </div>
                    <div>
                        <label>密码：</label>
                        <input type='password' placeholder="请输入密码" name="password" onChange={this.setPWD}/>
                    </div>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById("test"))