react如何设置默认选中

设置默认选中状态的方法

在React中，可以通过defaultValue或defaultChecked属性为表单元素设置默认选中状态。具体实现方式取决于表单元素的类型。

对于单选按钮（Radio Buttons）和复选框（Checkboxes）
使用defaultChecked属性可以设置初始选中状态：

<input type="radio" name="gender" value="male" defaultChecked />
<input type="checkbox" defaultChecked />

对于下拉选择框（Select）
通过defaultValue属性指定默认选中的option的value：

<select defaultValue="apple">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

使用状态管理默认值

在受控组件中，可以通过初始化state来设置默认选中状态：

const [selectedOption, setSelectedOption] = useState('apple');
return (
  <select 
    value={selectedOption}
    onChange={(e) => setSelectedOption(e.target.value)}
  >
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </select>
);

动态设置默认值

从API或props获取默认值时，可以在组件挂载时通过useEffect更新状态：

useEffect(() => {
  if (props.defaultValue) {
    setSelectedOption(props.defaultValue);
  }
}, [props.defaultValue]);