Как иметь 2 выбранных входа с эксклюзивными элементами? - PullRequest
Новая
       27

Как иметь 2 выбранных входа с эксклюзивными элементами?

1 голос
/ 19 апреля 2019

Допустим, у меня есть два выбранных входа.У них обоих одинаковые 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>

Это входы с множественным выбором (для этого я использую response-select v1, это старый проект, который требуетнесколько изменений).

Я хочу, чтобы при первом выборе «Яблоко» и «Виноград» они были отключены или скрыты во втором элементе «Выбор».

Есть ли реальный способ добиться этого?этот?Я не смог ничего найти или придумать. 

//  --------- 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}
/>

Ответы [ 2 ]

0 голосов
/ 19 апреля 2019

Если бы я был вами, я бы сохранил свои значения в состоянии, а затем обрезал бы реквизиты value, как показано в следующем примере: 

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

const selectNames = ["fruitsILove", "fruitsIHate"];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fruitsILove: [],
      fruitsIHate: []
    };
  }
  onChange = (value, { name }) => {
    this.setState({
      [name]: value
    });
  };

  trimValues(name) {
    const toRemove = this.state[
      name === "fruitsILove" ? "fruitsIHate" : "fruitsILove"
    ];

    // Depending of your UX you can remove the props or disable it
    // return fruits.filter(val => toRemove.indexOf(val) === -1);

    return fruits.map(val =>
      toRemove.indexOf(val) === -1 ? val : { ...val, isDisabled: true }
    );
  }
  render() {
    return (
      <div className="App">
        {selectNames.map(name => (
          <Select
            isMulti
            key={name}
            name={name}
            onChange={this.onChange}
            options={this.trimValues(name)}
            value={this.state[name]}
          />
        ))}
      </div>
    );
  }
}

Здесь живой пример .

0 голосов
/ 19 апреля 2019

Вы можете сделать это, поддерживая два списка с одинаковыми фруктами.Теперь, когда пользователь начинает выбирать из любимых фруктов, продолжайте удалять эти фрукты из списка ненавистных фруктов.Поэтому, когда пользователь нажимает на список ненавистных фруктов, он видит только те фрукты, которые он оставил непроверенными в предыдущем списке. ненавистные фрукты список.

...