重用Reach中选定的选项-选择

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的解决方案？我现在是这么想的：

1. 当选择运算符‘和’或‘或’‘时，阻止选择它们，但只更新selectedValue数组。但是，我是否也可以看到多选择部分中所选的选项呢？
2. 使操作符选项动态化，使其具有唯一性(可能使用Date()?)，但也会使选项数据混乱？如果有更好的解决方案

将不胜感激

Answer 1

不确定您的目的，但我建议将数据对象中的“和”和“或”作为临时值。然后用你想要显示的东西替换它。

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”、“和”、“B”、“和”、“C”；

这样，AND和OR仍然可供选择。这只是个主意，你得好好研究一下。