react如何设置默认选中

设置默认选中状态的方法

在React中，可以通过以下几种方式设置组件的默认选中状态：

使用受控组件

通过state管理选中状态，初始化时设置默认值：

const [isChecked, setIsChecked] = useState(true);

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

使用defaultChecked属性

对于原生表单元素，可以使用非受控组件的defaultChecked：

<input type="checkbox" defaultChecked />

单选按钮组

处理单选按钮时，通过比较当前值与默认值：

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

return (
  <>
    <input 
      type="radio" 
      checked={selectedOption === 'option1'} 
      onChange={() => setSelectedOption('option1')} 
    />
    <input 
      type="radio" 
      checked={selectedOption === 'option2'} 
      onChange={() => setSelectedOption('option2')} 
    />
  </>
);

下拉选择框

设置select元素的value或defaultValue：

const [selectedValue, setSelectedValue] = useState('default');

return (
  <select 
    value={selectedValue} 
    onChange={(e) => setSelectedValue(e.target.value)}
  >
    <option value="default">Default Option</option>
    <option value="other">Other Option</option>
  </select>
);

第三方UI库

如使用Material-UI等库，通常有defaultValue或类似属性：

<Checkbox defaultChecked />

注意事项

• 受控组件需要完整的状态管理
• 非受控组件初始化后状态变化需要通过ref获取
• 动态默认值应在组件挂载时通过useEffect设置