如何点击按钮通过代码选中react-select的B选项？

方案一：直接通过状态控制（无需使用ref） #

你当前代码有个关键问题：react-select的value属性需要接收和options数组结构一致的选项对象，而非单纯的字符串值。修正状态初始值后，点击按钮直接更新状态就能选中选项B：

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

const options = [
  { value: "A", label: "A" },
  { value: "B", label: "B" }
];

export default function App() {
  // 初始值改为匹配选项对象
  const [selectedOption, setSelectedOption] = useState(options.find(opt => opt.value === "A"));

  const handleChange = (value) => {
    setSelectedOption(value);    
  };

  return (
    <div className="App">
      <Select
        value={selectedOption}
        onChange={handleChange}
        options={options}
      />
      {/* 点击时设置为选项B的对象 */}
      <button onClick={() => setSelectedOption(options.find(opt => opt.value === "B"))}>Select B</button>
    </div>
  );
}

方案二：使用ref调用setValue（适合底层控制场景） #

如果需要用setValue方法，先简单说明：ref是React用来获取组件实例的工具，能直接调用组件内部方法。实现步骤如下：

1. 用useRef创建ref对象
2. 将ref绑定到Select组件
3. 点击按钮时，通过ref获取组件实例并调用setValue传入目标选项

代码示例：

import { useState, useRef } from "react";
import Select from "react-select";

const options = [
  { value: "A", label: "A" },
  { value: "B", label: "B" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(options.find(opt => opt.value === "A"));
  // 创建ref对象
  const selectRef = useRef(null);

  const handleChange = (value) => {
    setSelectedOption(value);    
  };

  return (
    <div className="App">
      <Select
        ref={selectRef} // 绑定ref到Select组件
        value={selectedOption}
        onChange={handleChange}
        options={options}
      />
      <button onClick={() => {
        // 通过ref调用setValue方法
        const optionB = options.find(opt => opt.value === "B");
        selectRef.current.setValue(optionB);
      }}>Select B</button>
    </div>
  );
}

注意：两种方案中，用options.find匹配选项对象更灵活，适合选项数组动态生成的场景；如果选项固定，也可以直接传入{ value: "B", label: "B" }。

内容的提问来源于stack exchange，提问作者Stéphane Laurent