react如何设置默认选中

设置默认选中状态的方法

在React中，可以通过组件的defaultValue或defaultChecked属性来设置默认选中状态，具体取决于使用的表单元素类型。

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

<input type="checkbox" defaultChecked={true} />
<input type="radio" defaultChecked={true} />

对于下拉选择框（Select） 使用defaultValue属性来设置默认选中的选项值：

<select defaultValue="option1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

使用状态管理默认选中

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

const [isChecked, setIsChecked] = useState(true);
const [selectedOption, setSelectedOption] = useState('option1');

return (
  <>
    <input 
      type="checkbox" 
      checked={isChecked}
      onChange={(e) => setIsChecked(e.target.checked)}
    />

    <select 
      value={selectedOption}
      onChange={(e) => setSelectedOption(e.target.value)}
    >
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
  </>
);

使用第三方库

对于复杂的表单场景，可以使用Formik等表单库来管理默认值：

<Formik
  initialValues={{
    agree: true,
    gender: 'male'
  }}
>
  {({ values }) => (
    <Form>
      <Field type="checkbox" name="agree" />
      <Field as="select" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </Field>
    </Form>
  )}
</Formik>

注意事项

• 非受控组件使用defaultChecked/defaultValue只在初始渲染时生效
• 受控组件需要通过state管理选中状态
• 确保单选按钮组的name属性相同才能实现互斥选择
• 对于动态选项，需要在组件挂载时设置默认选中状态