非受控组件
首先，我们创建了一个input表单。当我们启动我们的应用的时候，你可以向Input表单里面输入任何值并且可以看到变化，即使我们没有给任何的处理函数在我们的代码中。因为这是Html的原生事件，它管理着自己的内部状态。
import React from 'react'; const App = () => ( <div> <label> My uncontrolled Input: <input type="text" /> </label> </div> ); export default App;
非受控组件 VS 受控组件
当我们在这个例子中引入React State和Hooks时。
import React, { useState } from 'react'; const App = () => { const [value, setValue] = useState(''); const handleChange = event => setValue(event.target.value); return ( <div> <label> My still uncontrolled Input: <input type="text" onChange={handleChange} /> </label> <p> <strong>Output:</strong> {value} </p> </div> ); }; export default App;
运行效果如下
现在，我们可以看到当我们更改input表单里面的值时，输出的value值也会相应的产生变化。这时候我们问一下自己，这个为什么还是非受控组件呢？
先别急，我们来看下一个例子
import React, { useState } from 'react'; const App = () => { const [value, setValue] = useState('Hello React'); const handleChange = event => setValue(event.target.value); return ( <div> <label> My still uncontrolled Input: <input type="text" onChange={handleChange} /> </label> <p> <strong>Output:</strong> {value} </p> </div> ); }; export default App;
代码运行效果
你能发现这个例子和上面那个例子有什么不同的地方吗？在这个例子中，我们给了value一个初始值"hello react"。但是我们可以发现，当我们启动应用的时候，input表单里面的值依旧为空。只有我们开始输入的时候，input表单和output才似乎开始同步。这里为什么要用似乎呢？其实，Input表单中的字段实际上还是跟踪的是它自己的内部状态，然而output跟踪的React中state的值，他们能够同步是靠handleChange函数。这就是为什么启动时他们的值不一样的原因了。
从非受控组件到受控组件
当我们将input表单中value值与React中的state进行绑定，input表单就不会使用它内部的状态，而是你提供的state值。当我们现在向input表单中输入值的时候，表单的字段和输出的值就会同步更新拉。这个表单已经从非受控组件变成了受控组件。
import React, { useState } from 'react'; const App = () => { const [value, setValue] = useState('Hello React'); const handleChange = event => setValue(event.target.value); return ( <div> <label> My controlled Input: <input type="text" value={value} onChange={handleChange} /> </label> <p> <strong>Output:</strong> {value} </p> </div> ); }; export default App;
