如何实现5秒后自动切换react-select的选中选项

要实现延时自动切换react-select选中值的功能，你需要修改以下几处代码：

• 首先修正现有受控逻辑的问题：你当前的Select组件没有绑定value属性，且handleChange里的赋值逻辑把原本是对象格式的presence改成了字符串，类型不统一会导致绑定失效。
• 新增useEffect钩子配合定时器实现延时切换逻辑，组件卸载时清理定时器避免内存泄漏。
• 可以自定义延时的秒数，以及要切换到的目标option的匹配规则（比如按value匹配）。

修改后的完整代码如下：

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import Select, { components } from "react-select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircle, faMinusCircle } from "@fortawesome/fontawesome-free-solid";
import "./presence.css";

function Presence() {
  const [presence, setPresence] = useState({
    value: "unavailable",
    label: "Offline",
    icon: <FontAwesomeIcon icon={faCircle} color="gray" />,
  });
  console.log(presence);
  const client = useSelector((state) => state.client.client);

  // 修正handleChange赋值逻辑，保留完整option对象
  const handleChange = (selectedOption) => {
    setPresence(selectedOption);
    console.log(`Option selected:`, selectedOption);
  };

  const { Option, SingleValue } = components;
  const CustomSelectOption = (props) => (
    <Option {...props}>
      <div style={{ display: "inline-block", marginRight: "5%" }}>
        {props.data.icon}{" "}
      </div>
      <div style={{ display: "inline-block" }}> {props.data.label}</div>
    </Option>
  );

  const ValueOption = (props) => (
    <SingleValue {...props}>
      <span style={{ marginRight: "8%" }}> {props.data.icon}</span>
      <span>{props.data.label}</span>
    </SingleValue>
  );
  const options = [
    {
      value: "chat",
      label: "Available",
      icon: <FontAwesomeIcon icon={faCircle} color="#5cd068" />,
    },
    {
      value: "xa",
      label: "Appear Away",
      icon: <FontAwesomeIcon icon={faCircle} color="orange" />,
    },
    {
      value: "away",
      label: "Be Right Back",
      icon: <FontAwesomeIcon icon={faCircle} color="orange" />,
    },

    {
      value: "dnd",
      label: "Do not Disturb",
      icon: <FontAwesomeIcon icon={faMinusCircle} color="red" />,
    },

    {
      value: "unavailable",
      label: "Offline",
      icon: <FontAwesomeIcon icon={faCircle} color="gray" />,
    },
  ];
  const style = {
    control: (base) => ({
      ...base,
      border: 0,

      boxShadow: "none",
    }),
    placeholder: (base) => ({
      ...base,
      fontSize: "1em",
      fontWeight: 600,
    }),
  };
  const DropdownIndicator = (props) => {
    return (
      components.DropdownIndicator && (
        <components.DropdownIndicator {...props}>
          <FontAwesomeIcon
            icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}
          />
        </components.DropdownIndicator>
      )
    );
  };

  // 新增：延时自动切换逻辑
  useEffect(() => {
    // 配置项：延时秒数，这里设置为5秒，可自行修改
    const delaySeconds = 5;
    // 配置项：要切换到的目标option的value，这里示例切换为Available，可自行修改
    const targetOptionValue = "chat";

    const timer = setTimeout(() => {
      const targetOption = options.find(item => item.value === targetOptionValue);
      if (targetOption) {
        setPresence(targetOption);
      }
    }, delaySeconds * 1000);

    // 组件卸载时清理定时器
    return () => clearTimeout(timer);
  }, [options]);

  return (
    <Select
      value={presence} // 新增：绑定value属性实现受控
      styles={style}
      name="presence"
      clearable={false}
      placeholder={"Choose"}
      onChange={handleChange}
      options={options}
      classNamePrefix="select"
      components={{
        Option: CustomSelectOption,
        SingleValue: ValueOption,
        DropdownIndicator: DropdownIndicator,
        IndicatorSeparator: () => null,
      }}
    />
  );
}

export default Presence;

你可以自行修改delaySeconds变量调整等待时长，修改targetOptionValue变量指定要自动选中的目标option的value值即可。

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