React页面首次渲染时如何让Select组件默认选项值显示？

要实现页面首次渲染时<p>{selectState}</p>显示默认值red，只需调整以下两点：

• 设置状态初始值：给selectState的初始状态赋值为"red"，React受控组件的取值完全由绑定的state决定，初始state为空的话，p标签自然没有内容。
• 移除Option的selected属性：在受控模式下，Select的value属性会覆盖Option的selected设置，保留它只会造成混淆，直接删掉即可。

修正后的完整代码示例 #

import { useState } from 'react';
// 假设你已导入Select和Option组件（如antd组件或自定义组件）

function YourComponent() {
  // 关键：初始化state为"red"
  const [selectState, setSelectState] = useState("red");

  return (
    <div>
      <p>{selectState}</p>
      <Select
        id="mySelect"
        value={selectState}
        onChange={(e) => setSelectState(e.target.value)}
      >
        <Option value="red">Red</Option>
        <Option value="black">Black</Option>
        <Option value="blue">Blue</Option>
        <Option value="yellow">Yellow</Option>
      </Select>
    </div>
  );
}

原理说明 #

React中通过value和onChange绑定状态的组件属于受控组件，组件的当前值完全由state驱动，而非DOM自身的selected属性。只要保证state的初始值和期望的默认选中值一致，页面渲染时p标签就会同步显示该值，Select组件也会自动选中对应的选项。

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