React中点击下拉选项修改width和height状态值的实现方法

问题出在option元素的onClick事件在多数浏览器中不会被触发，正确的做法是给select元素绑定onChange事件，通过选中的选项值来更新state。具体修改步骤如下：

1. 修正option的value属性 #

两个option的value不能重复，否则无法区分选中的选项，给每个选项设置唯一的value：

<option value="res1" selected>Resolution 1</option>
<option value="res2">Resolution 2</option>

2. 给select添加onChange事件 #

移除option上的onClick，给select绑定onChange回调，根据选中的value设置对应的width和height：

const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

// 处理select变化的回调函数
const handleSelectChange = (e) => {
  const selectedValue = e.target.value;
  if (selectedValue === "res1") {
    setWidth(100);
    setHeight(200);
  } else if (selectedValue === "res2") {
    setWidth(1000);
    setHeight(2000);
  }
};

// 渲染select组件
<div className="flex items-center space-x-2">
  <select
    id="countries"
    className="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    onChange={handleSelectChange}
  >
    <option value="res1" selected>Resolution 1</option>
    <option value="res2">Resolution 2</option>
  </select>
</div>

关键说明 #

• select的onChange事件会在选项切换时触发，通过e.target.value可以获取当前选中的option的value值。
• 避免给option绑定onClick，因为这不是标准的事件触发方式，不同浏览器兼容性差。
• 确保每个option的value唯一，这样才能准确判断用户选择的是哪个选项。

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