如何在 React-Select 中合并所选选项。

Question

我使用react-select，而且我还是新手。我有一个名为Example的组件。

const colourOptions = [
  { value: '1', label: '1', color: '#00B8D9' },
  { value: '2', label: '2', color: '#0052CC' },
  { value: '3', label: '3', color: '#5243AA' },
];

class Example extends React.Component {
      state = {
        selectedOption: null,
      }

      render() {
        const { selectedOption, onHandleChange } = this.props;
        return (

          <Select
            onChange={onHandleChange}
            options={colourOptions}
          />

        );
      }
    }

    export default Example;

在另一个文件中，我们有一个功能组件。

export default function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({});

  const handleChange = (selectedOption) => {
    setSelectedOption(selectedOption)
    console.log(selectedOption)
  };

  return (
    <div>

      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>
      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>
      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>

    </div>
  );
}

通过更改每个示例，将之前选择的选项的值移除。 如何将所有选择的选项合并到一个对象中？

- yaser.barati

Answer 1

你需要为每个 Example 实例维护单独的选项值。 像这样：

export default function UserProfile() {
    const [selectedOption, setSelectedOption] = useState({ example1: '', example2: '', example3: '' });

    const handleChange = (key, selectedOption) => {
        setSelectedOption(prev => ({...prev, [key]: selectedOption}));
        console.log(selectedOption)
    };

    return (
        <div>
            <Example1 onHandleChange={(value) => handleChange('example1', value)} selectedOption={selectedOption.example1}/>
            <Example2 onHandleChange={(value) => handleChange('example3', value)} selectedOption={selectedOption.example2}/>
            <Example3 onHandleChange={(value) => handleChange('example3', value)} selectedOption={selectedOption.example3}/>
        </div>
    );
}

编辑 可工作代码在这里:

https://codesandbox.io/s/eloquent-mclaren-8s2z2?file=/src/UserProfile.js

另外，需要注意的是状态更新是异步的，所以当您在设置状态后立即进行 console.log 时，您可能会看到打印旧状态的日志。

如果您愿意，可以在此处详细阅读

- gdh

Answer 2

您可以将所有选定的选项收集到一个数组中。请查看以下链接以获取可行解决方案 https://codesandbox.io/s/react-example-xk3bw?fontsize=14&hidenavigation=1&theme=dark

import React, { useState,useEffect } from "react";
import Example1 from "./Example";
import Example2 from "./Example";
import Example3 from "./Example";

export function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({});
  const [allselectedOption, setAllSelectedOption] = useState([]);

  useEffect(() => {
    console.log(allselectedOption);
 },[allselectedOption]);

  const handleChange = selectedOption => {
    setSelectedOption(selectedOption);
    let newSelectedOptions = [...allselectedOption,selectedOption]
    setAllSelectedOption(newSelectedOptions)
    console.log(newSelectedOptions);
  };

  return (
    <div>
      <Example1 onHandleChange={handleChange} selectedOption={selectedOption} />
      <Example2 onHandleChange={handleChange} selectedOption={selectedOption} />
      <Example3 onHandleChange={handleChange} selectedOption={selectedOption} />
    </div>
  );
}

- Amila Dulanjana

---

@Amila，这很棒。唯一的问题是它没有显示最后一个选择。你能帮忙吗？ - yaser.barati

@yaser.barati 我更新了答案，请查看。有两个选项，你可以选择其中一个。你可以使用 useEffect 或者你可以在 handleChange 函数内处理逻辑。 - Amila Dulanjana