在 Reach-select 中重用 selected 选项

Question

我正在使用 react-select 创建一个逻辑表达式并将其保存在数组中（我使用的数据）。代码如下：

import React, { useState } from 'react';
import Select from 'react-select';
 
function App() {
  const data = [
    {
      value: and,
      label: "AND"
    },
    {
      value: or,
      label: "OR"
    },
    {
      value: A,
      label: "A"
    },
    {
      value: B,
      label: "B"
    },
    {
      value: C,
      label: "C"
    }
  ];
  const [selectedValue, setSelectedValue] = useState([]);
  const handleChange = (e) => {
    setSelectedValue(Array.isArray(e) ? e.map(x => x.value) : []);
  }
 
  return (
    <div className="App">
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter(obj => selectedValue.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={handleChange} // assign onChange function
        isMulti
        isClearable
        hideSelectedOptions={false}
      />
 
      {selectedValue && <div style={{ marginTop: 20, lineHeight: '25px' }}>
        <div><b>Selected Value: </b> {JSON.stringify(selectedValue, null, 2)}</div>
      </div>}
    </div>
  );
}
 
export default App;

创建A and B等选项一次使用效果很好，但是有没有通过重用and选项创建A and B and C的解决方案？这是我现在的想法：

当 select operator'and' 或 'or' 时，阻止对它们进行 selected 但只更新 selectedValue 数组。但是有没有办法在 multi-select 部分也看到 selected 选项？
使运算符选项动态化以使其唯一（也许使用 Date()？），但它也会弄乱选项数据？如果有更好的解决方案，将不胜感激

Answer 1

不确定您的目的，但我建议您将数据对象中的“AND”和“OR”视为临时值。然后将其替换为您想要显示的内容。

const handleChange = (e) => {

    setSelectedValue(Array.isArray(e) ? 
         e.map(x => {
             let temp;  
             if (x.value === 'AND') return 'and'
             if (x.value === 'OR') return 'or'
             return x.value
     }) : []);
}

您选择的数组将是 ['A','and','B','and','C'];

这样 AND 和 OR 仍然可供选择。这只是一个想法，你需要努力。

在 Reach-select 中重用 selected 选项

Reuse selected options in Reach-select

reactjs

react-select