React 受控与非受控组件

需求

这次来对比一下受控组件和非受控组件的用法。这里的需求就是实现一个 input 元素。

受控组件

刚开始写 React 的时候，可能最使用的都是受控组件的方式。input 里加个 value={xxx} 来指定 input 元素的值，然后再加个 onChange 回调去更新 xxx。

如果不加 onChange 无论你怎么输入，xxx 的值都不会变，所以 input 里的值也一样不会变。

import React, { useState } from "react";

export default function App() {
  const [xxx, setXXX] = useState("hello");

  const onChange = e => setXXX(e.target.value);

  return (
    <div className="App">
      <h2>受控组件</h2>

      <input value={xxx} onChange={onChange} />
      <p>值：{xxx}</p>
    </div>
  );
}

非受控组件

另一种非受控组件的写法就是不去监听每次 value 的变化，所以，这里需要采用 ref 的方式去或者 input 的值。

import React, { useState, useRef } from "react";

export default function App() {
  const [yyy, setYYY] = useState("world");
  const refInput = useRef(null);
  const onBlur = () => {
    if (refInput !== null) {
      setYYY(refInput.current.value);
    }
  };

  return (
    <div>
      <h2>非受控组件</h2>
      <input defaultValue={yyy} ref={refInput} onBlur={onBlur} />
      <p>值：{yyy}</p>
    </div>
  );
}

onChange

React 的 onChange 和 HTML 里的 onchange 是不一样的。

React 的 onChange: 只要用户输入就会触发。
HTML 的 onchange: 只有用户鼠标移走的时候才会触发，会比 onblur 早。

总结

上面的代码链接：https://codesandbox.io/s/runtime-bash-3w9pc?file=/src/App.js

这两种方式都可以实现 input 改值的需求，不一样的地方有：如果需要监听值的一些操作，比如验证，则使用受控组件方式比较好。如果只需要获取最后用户输入的值，比如输入完成直接提交表单，则使用非受控组件会简洁一些。总之，一个不行就用另一个呗 :)