React 16.8表单是否仍需onChange？技术疑问咨询

嘿，这个问题真的戳中了很多React新手从旧教程过渡到新版本时的困惑！我来给你拆解清楚：

1. onChange是不是必填项？ #

答案是分情况，核心在于你用的是「受控组件」还是「非受控组件」：

• 受控组件：当你把input的value绑定到React state时，onChange就是必填的。因为受控组件的核心是让state成为输入值的唯一数据源——如果没有onChange来更新state，输入框的value会被state固定死，自然没法输入内容。比如：

  import { useState } from 'react';
  
  function NameInput() {
    const [name, setName] = useState('');
    // 这里必须用onChange更新state，否则输入无效
    return <input value={name} onChange={(e) => setName(e.target.value)} />;
  }
  

• 非受控组件：如果没有把value绑定到state（或者用defaultValue设置初始值），那输入框是不受React state控制的，这时候完全不需要onChange就能正常输入。比如：

  // 简单的非受控输入框，直接输入即可
  <input type="text" />
  
  // 带初始值的非受控组件，用defaultValue
  <input type="text" defaultValue="默认值" />
  

旧教程之所以强调onChange必须，是因为早期很多教程只聚焦于受控组件的写法，没把非受控组件的场景讲清楚——但React从始至终都支持这两种模式，16.8版本的hooks只是让受控组件的写法更简洁，并没有改变这个规则。

2. 使用onChange是不是最佳实践？ #

同样要看你的业务场景：

• 优先用受控组件+onChange：如果你的表单需要实时验证（比如输入时检查密码强度）、实时更新UI（比如显示输入字数）、表单联动（比如选择某个选项后才显示对应的输入框），或者需要统一管理表单状态，那受控组件是最佳实践。onChange在这里是实现状态同步的关键，能让你的代码逻辑更清晰、更容易维护。
• 非受控组件也没问题：如果是简单的场景（比如一个只需要提交时获取值的搜索框、单个输入项），非受控组件的写法更简洁，完全可以不用onChange，甚至可以用useRef来获取输入值：

  import { useRef } from 'react';
  
  function SearchBar() {
    const inputRef = useRef(null);
    
    const handleSubmit = () => {
      console.log('搜索内容：', inputRef.current.value);
    };
  
    return (
      <div>
        <input ref={inputRef} type="text" />
        <button onClick={handleSubmit}>搜索</button>
      </div>
    );
  }
  

3. 能不能忽略onChange直接写代码？ #

当然可以，但前提是你清楚自己的代码属于哪种模式：

• 如果不需要React state来控制输入值，非受控组件完全可以忽略onChange，代码更轻便。
• 但如果是受控组件（绑定了value到state），那绝对不能忽略onChange，否则会出现输入框无法编辑的问题——这也是旧教程反复强调它的原因。

总结一下：onChange不是所有表单场景的必填项，但在受控组件中是必须的；是否使用它取决于你的表单复杂度和需求，两种模式都有各自的适用场景~

内容的提问来源于stack exchange，提问作者Stanciu Vlad