时间戳

首页 > 解决方案 > 在 Reach-select 中重复使用选定的选项

reactjs - 在 Reach-select 中重复使用选定的选项

问题描述

我正在使用 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，但是有没有A and B and C通过重用and选项来创建的解决方案？这是我现在的想法：

  1. 选择操作员'and'或'或'时，请防止选择它们，但仅更新selectedValue数组。但是有没有办法我也可以在多选部分看到选定的选项？
  2. 使操作员选项动态化以使其唯一（也许使用 Date()？），但它也会弄乱选项数据？如果有更好的解决方案将不胜感激

标签： reactjsreact-select

解决方案

不确定您的目的，但我建议您将数据对象中的“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 仍然可供选择。这只是一个想法，您需要继续努力。

推荐阅读