基本环境和结构
<!-- 准备好员工“容器” --> <div id="app"></div> <!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script> <!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <!-- 引入Babel，用于编译jsx为js --> <script type="text/javascript" src="../JS/babel.min.js"></script> <!-- 此处类型为babel --> <script type="text/babel"> // react 内容 </script>
写一个非受控组件
class Login extends React.Component { render () { return ( <form action="http://example.com"> 用户名： <input type="text" name="username"/> 密码： <input type="password" name="password"/> <button> 登录 </button> </form> ) } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Login />,document.getElementById('app'))
以上表单结构，是我们以前原生最常见的表单登录。但是这种结构表单会默认以GET的方式提交表单数据到action里面配置的路径。这种方式非常不安全，且用户体检极差。
为此我们要使用ajax的方式提交数据，所以我们要阻止表单这种默认行为。原生表单有一个事件叫onsubmit,但是在react中我们要使用onSubmit事件来进行数据处理。接下来我们修改代码：
class Login extends React.Component { loginFunc = (event) => { // 阻止表单默认行为 event.preventDefault() // 获取输入框节点 const { username, password } = this // 获取输入框的值 const data = { username: username.value, password: password.value } console.log('表单数据',data) } render () { return ( <form onSubmit={this.loginFunc}> 用户名： <input ref={c => this.username = c} type="text" name="username"/> 密码： <input ref={c => this.password = c} type="password" name="password"/> <button>登录</button> </form> ) } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Login />,document.getElementById('app'))
以上代码，我们在两个输入框里面都添加了ref属性，并在loginFunc的事件中拿到了数据，且阻止了表单的默认行为，接下来只需要进行ajax请求提交数据即可完成交互。
至此，我们已经完成了一个非受控组件的编写。
写一个受控组件
class Login extends React.Component { // 初始化状态 state = { username: '', password: '' } loginFunc = (event) => { // 阻止表单默认行为 event.preventDefault(); // 从状态里面获取表单数据 const { username, password } = this.state // 获取输入框的值 const data = {username, password } console.log('表单数据', data) } getUsername = (event) => { // 从事件源中获取用户名 this.setState({ username: event.target.value }) } getPassword = (event) => { // 从事件源中获取密码 this.setState({ password: event.target.value }) } render () { return ( <form onSubmit={this.loginFunc}> 用户名： <input onChange={this.getUsername} type="text" name="username" /> 密码： <input onChange={this.getPassword} type="password" name="password" /> <button>登录</button> </form> ) } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Login />, document.getElementById('app'))
从以上代码中，我们通过给输入添加onChange事件获取输入框的值，并将其保存在状态中，在loginFunc中我们直接从状态中获取表单数据即可。且阻止了表单的默认行为，接下来只需要进行ajax请求提交数据即可完成交互。
至此，我们已经完成了一个受控组件的编写。
总结
在React中，表单元素通常被称为“受控组件”和“非受控组件”。
- 受控组件是由
React控制的表单元素。当用户与受控组件交互时，React会更新组件的状态。要使用受控组件，您需要为每个表单元素编写事件处理程序，并将值存储在组件的状态中。这使得您可以在React中实现表单验证和动态表单。 - 非受控组件是由
DOM处理的表单元素。当用户与非受控组件交互时，DOM会更新元素的状态。要使用非受控组件，您可以使用ref从DOM中获取表单值。这使得您可以在React中使用第三方库和非React代码。
当然在react中，我们希望使用受控组件来完成表单数据的获取，因为react中告诉我们不要过度使用ref。
