受控组件和非受控组件

官方对受控组件和非受控组件的定义

受控组件和非受控组件是面向表单输入的两种处理方式，注意是表单输入。

受控组件

根据官方说明：大多数情况下应该使用受控组件，因为我们可以在获取数据过程中进行判断、处理等二次加工操作。(但具体用什么依然要根据自己应用的场景来判断)

import React from 'react';

const ControlledComponent = () => {
  const [ value, setValue ] = useState<string>( '0' );

  const handleChange = (event) => {
    // 这里可以对获取到的值进行判断处理，input 输入框中显示什么内容，将由这里控制。
    setValut( event.target.value )
  };

  return (
    <div>
      <input
        type="text"
        value={ value }
        onChange={ handleChange }
      />
    </div>
  );
}

受控组件一般会需要自己设置state，参与的标签通常会有value和onChange，然后我们在自己onChange处理函数中对数据进行处理。

提示

React 中的 onChange 和 HTML 中的 onChange 事件是不一样的。HTML的onChange触发时机为鼠标移开控件后触发，但早于onBlur。而React的onChange则是表单内数据发生改变就触发。

非受控组件

官方：非受控组件介绍

个人理解为直接从输入表单的dom中获取内容的组件则称为非受控组件。

import React from 'react';

const UnControlledComponent = () => {
  const inputRef = useRef<HTMLInputElement>( null );

  const handleBlur = () => {
    // 这里通过 ref 关联 input ，然后在失去焦点的情况下获取元素的值
    if ( inputRef.current !== null ) {
      console.log( inputRef.current.value );
    }
  };

  return (
    <div>
      <input
        type="text"
        defaultValue="0"
        ref={ inputRef }
        onblur={ handleBlur }
      />
    </div>
  );
}

在非受控组件中，依然可以使用state来获取inputRef.current.value中获取的值，但这不再影响表单在界面上内容的展示。接下来可以做的是对数据是否可提交或其他逻辑的判断，不过这些任务受控组件也能完成。

受控和非受控没有孰好孰坏之说，只看业务的需求和个人喜好是什么！网上有的说法:没有props和value的组件即非受控组件。这有点偏颇，上述事例中依然可以传入props，但它依然是个非受控组件！