在react多选下拉列表中,我想显示姓名和电子邮件以及同一级别的复选框

IT技术 reactjs react-hooks react-multiselect-checkboxes
2021-05-24 14:31:07

在 react Multiselect 下拉列表中,我想显示姓名和电子邮件以及同一级别的复选框(根据所附的屏幕截图)可以使用multiselect-react-dropdown吗?我在下面尝试过,但它仍然只是名称。我们如何插入电子邮件以及名称选项可能是褪色的,有什么建议吗?

添加了codesandbox测试链接:https ://codesandbox.io/s/stoic-cartwright-9tb3i?file =/ src/App.js:395-419

import Multiselect from 'multiselect-react-dropdown';

    const options = [
        { key: 'Dan', email: 'dan@test.com', id: 1},
        { key: 'Crots', email: 'crots@test.com', id: 2},
        { key: 'Sum', email: 'sum@test.com', id: 3},
        { key: 'Tim', email: 'tim@test.com', id: 4}
      ];

   const [selectedOption, setSelectedOption] = useState([]);   
   const handleTypeSelect = (e) => {
        const copy = [...selectedOption];
        copy.push(e);
        setSelectedOption(copy);
    };

    <div className="nomineeSelectBox">
             <div id="dialog2" className="triangle_down1"/>
                <div className="arrowdown">
                    <Multiselect
                        onSelect={handleTypeSelect}
                        options={selectedOption.length + 1 === maxOptions ? [] : options}
                        displayValue="key"
                        showCheckbox={true}
                        emptyRecordMsg={"Maximum nominees selected !"}
                    />
    
                </div>
            </div>

在此处输入图片说明

1个回答

您可以尝试添加以下代码:

options.forEach(option=>{
   option.displayValue=option.key+"\t"+option.email;
})

在返回语句之前。然后更改以下代码:

<Multiselect
        onSelect={handleTypeSelect}
        onRemove={handleTypeRemove}
        options={selectedOption.length + 1 === maxOptions ? [] : options}
        displayValue="key"
        showCheckbox={true}
        emptyRecordMsg={"Maximum nominees selected !"}
      />

<Multiselect
        onSelect={handleTypeSelect}
        onRemove={handleTypeRemove}
        options={selectedOption.length + 1 === maxOptions ? [] : options}
        displayValue="displayValue"
        showCheckbox={true}
        emptyRecordMsg={"Maximum nominees selected !"}
      />