javascript - 如何在 react-select 中合并 selectedOptions

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>
  );
}

通过更改每个 Example，删除了先前 selectedOption 的值。 如何将所有 selectedOptions 放入(合并)一个对象中？

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 时，您可能会看到日志打印旧状态。

阅读more here如果你喜欢