Question

假设我有两个选择输入。他们两个都有相同的5个水果。选择的两个输入是“我爱的水果”和“我讨厌的水果”。

//  This code is a sample code to describe the problem

<select name='lovedFruits'>
    <option value='Apple'>Apple</option>
    <option value='Orange'>Orange</option>
    <option value='Mango'>Mango</option>
    <option value='Grapes'>Grapes</option>
    <option value='Watermelon'>Watermelon</option>
</select>

<select name='hatedFruits'>
    <option value='Apple'>Apple</option>
    <option value='Orange'>Orange</option>
    <option value='Mango'>Mango</option>
    <option value='Grapes'>Grapes</option>
    <option value='Watermelon'>Watermelon</option>
</select>

这些是多选择输入（为此，我正在使用react-select v1，这是一个需要更改的旧项目）。

我想要的是，如果我在第一次选择中选择了Apple和Grapes，则应该在第二个选择元素中将其禁用或隐藏。

有没有可行的方法来实现这一目标？我找不到任何东西。

//  --------- Demo React Select code ----------

fruits = [
    {label: 'Apple', value: 'Apple'}
    {label: 'Orange', value: 'Orange'}
    {label: 'Mango', value: 'Mango'}
    {label: 'Grapes', value: 'Grapes'}
    {label: 'Watermelon', value: 'Watermelon'}
]

<Field 
    name='fruitsILove'

    selectConfig={
        closeOnSelect: false,
        disabled: false,
        multi: true,
        simpleValue: false,
        removeSelected: true,
    }
    options={fruits}
/>

<Field 
    name='fruitsIHate'
    selectConfig={
        closeOnSelect: false,
        component={renderSelect}
        disabled: false,
        multi: true,
        simpleValue: false,
        removeSelected: true,
    }
    options={fruits}
/>

Answer 1

您可以通过维护两个具有相同水果的列表来做到这一点。现在，随着用户开始从喜欢的水果中进行选择，请继续从hatedFruits列表中删除这些水果。因此，当用户单击“讨厌的水果”列表时，他只会看到在上一个列表中未选中的水果。

let fruits = [
    {label: 'Apple', value: 'Apple'}
    {label: 'Orange', value: 'Orange'}
    {label: 'Mango', value: 'Mango'}
    {label: 'Grapes', value: 'Grapes'}
    {label: 'Watermelon', value: 'Watermelon'}
];

let favoriteFruits = fruits.slice();
let hatedFruits = fruits.slice();

从 hatedFruits 列表中删除在 favoriteFruits 列表中选择的水果。

Answer 2

如果我是你，我将状态存储在状态中，然后像以下示例一样修剪dates <- sample(seq(from=as.POSIXct("2019-03-12",tz="UTC"),to=as.POSIXct("2019-03-20",tz="UTC"),by = "day"),size = 100,replace=TRUE) group <- sample(c("A","B","C"),100,TRUE) df <- data.frame(CREATIONDATE_DAY = dates,GROUP = group) # calculate the occurances for each day and group dfMod <- df %>% group_by(CREATIONDATE_DAY,GROUP) %>% dplyr::summarise(COUNT = n()) %>% ungroup() # Compute the rank by count for each day dfMod <- dfMod %>% group_by(CREATIONDATE_DAY) %>% mutate(rank = rank(-COUNT, ties.method ="min"))道具：

value

这里是live example。

如何使2个具有独占元素的选择输入？

2 个答案: