如何点击按钮将react-select字段重置为选项数组首个值？

你的代码目前有两个关键问题需要修正，同时补充重置逻辑即可实现需求：

• 状态存储格式错误：react-select组件的value属性需要接收的是options数组中的完整对象（比如{value: "something", label: "Something"}），而不是单独的value字符串。
• 缺少重置函数实现：需要定义handleReset函数来完成状态重置。

以下是修改后的完整代码：

import Select from 'react-select';
import { useState } from 'react';

function Component() {
  const options = [{value: "something", label: "Something"}, {value: "another", label: "Another"}];
  // 初始化状态为options的第一个选项对象
  const [inputValue, setInputValue] = useState(options[0]);
  const [inputValue2, setInputValue2] = useState(options[0]);

  // 实现重置函数：将两个select的状态设为options第一个值
  const handleReset = () => {
    setInputValue(options[0]);
    setInputValue2(options[0]);
  };

  return (
    <div>
      <Select 
        options={options}
        onChange={(selectedOption) => setInputValue(selectedOption)}
        value={inputValue}
      />
      <Select 
        options={options}
        onChange={(selectedOption) => setInputValue2(selectedOption)}
        value={inputValue2}
      />
      <button onClick={handleReset}>Clear all Values</button>
    </div>
  );
}

export default Component;

关键修改说明： #

1. 状态初始化：把useState("")改成useState(options[0])，确保初始值符合react-select的属性要求。
2. onChange逻辑：onChange回调接收的是选中的完整option对象，直接将其存入状态即可，不需要仅提取e.value。
3. 重置函数：handleReset中直接调用状态设置函数，将两个select的状态都重置为options[0]。

如果你的options数组可能为空，建议在初始化和重置时增加判断，比如options[0] || null，避免出现报错。

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