非受控组件

首先，我们创建了一个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;