React中如何通过Refs程序化设置Select值？纯JS方法失效原因

嘿，这个问题我之前也踩过类似的坑，咱们一步步来拆解清楚：

一、为什么原生JS设置Select值的方法在React里无效？ #

核心原因在于React的受控组件机制：React中表单元素（比如Select）的取值通常是由组件的state来驱动的，而不是直接操作DOM。

你用原生JS（或者jQuery）直接修改DOM的value属性，虽然能临时改变页面上显示的值，但React的state并没有同步更新。当下一次组件重新渲染时，React会根据state里的原始值把Select的内容还原回去，所以你会看到值没法真正更新。

简单说：React把state作为表单值的唯一“真相来源”，直接改DOM绕开了React的数据流，自然不会生效。

二、在React中如何正确设置Select的值？ #

推荐用受控组件的方式来实现，这也是React官方推荐的表单处理方案；如果有特殊场景，也可以用非受控组件。

1. 受控组件（推荐） #

把Select的value绑定到组件的state，通过更新state来改变Select的值：

import { useState } from 'react';

function MySelectComponent() {
  // 初始化state为默认值'1'
  const [selectedVal, setSelectedVal] = useState('1');

  // 处理Select的变化事件
  const handleSelectChange = (e) => {
    setSelectedVal(e.target.value);
  };

  // 手动设置值的方法（比如点击按钮触发）
  const setToValue1 = () => {
    setSelectedVal('1');
  };

  return (
    <div>
      <select 
        id="mySelect" 
        value={selectedVal} 
        onChange={handleSelectChange}
      >
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button onClick={setToValue1}>设置为1</button>
    </div>
  );
}

这里只要调用setSelectedVal更新state，React就会自动重新渲染Select，把值同步过去，完全符合React的数据流逻辑。

2. 非受控组件（特殊场景使用） #

如果你的表单不需要频繁同步state，也可以用useRef直接操作DOM，但这种方式不推荐作为常规方案：

import { useRef } from 'react';

function MyUncontrolledSelect() {
  const selectRef = useRef(null);

  const setToValue1 = () => {
    if (selectRef.current) {
      // 直接修改DOM的value
      selectRef.current.value = '1';
      // 如果需要触发onChange事件，得手动派发
      selectRef.current.dispatchEvent(new Event('change'));
    }
  };

  return (
    <div>
      <select id="mySelect" ref={selectRef}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button onClick={setToValue1}>设置为1</button>
    </div>
  );
}

三、为什么原生form的reset按钮无法重置React控制的表单字段？ #

原生reset按钮的作用是把表单元素重置为它们的初始DOM属性值，但React受控组件的取值是由state决定的，和DOM的初始属性没有直接关联。

当你点击reset按钮时，浏览器会临时把DOM值改回初始状态，但React会立刻根据当前的state重新渲染，把值又改回去，所以看起来像是没生效。

解决方法很简单：手动监听表单的onReset事件，在事件处理函数里把state重置为初始值：

import { useState } from 'react';

function MyResetForm() {
  // 定义表单的初始状态
  const initialFormState = { selectedVal: '1' };
  const [formState, setFormState] = useState(initialFormState);

  const handleSelectChange = (e) => {
    setFormState({
      ...formState,
      selectedVal: e.target.value
    });
  };

  const handleReset = (e) => {
    e.preventDefault(); // 阻止原生reset的默认行为
    setFormState(initialFormState); // 把state重置为初始值
  };

  return (
    <form onReset={handleReset}>
      <select 
        value={formState.selectedVal} 
        onChange={handleSelectChange}
      >
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button type="reset">重置</button>
    </form>
  );
}

这样点击重置按钮时，会把state还原到初始状态，React就会自动把Select的值改回初始值，达到预期的重置效果。

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