Как сделать фильтр в реакции-выбора, используя значение другого реакции-выбора - PullRequest
Новая
       17

Как сделать фильтр в реакции-выбора, используя значение другого реакции-выбора

1 голос
/ 19 июня 2019

Я создаю решение, используя react-select, и что выбор должен содержать только те параметры, которые он не содержит в другом. Ex 

import React from 'react'
import Select from 'react-select'

const list = [
  { label: 'foo', value: 1 },
  { label: 'bar', value: 2 },
  { label: 'bin', value: 3 },
]

export default Test extends React.Component {
  render = () => (
    <>
      <Select ref="a" options={list} />
      <Select ref="b" options={list} filterOption={o => /* devo omitir "a" */} />
    </>
  )
}

Что мне нужно сделать, чтобы <Select ref="b" /> отфильтровывался по значению другого <Select ref="a" />?

Ответы [ 2 ]

1 голос
/ 24 июня 2019

Ответ выше от Лоры нарушает фильтрацию, когда вы пишете пользовательскую функцию filterOption (Если вы не хотите, чтобы ваш Select был фильтруемым, тогда, вероятно, все в порядке).

Более простым решением было бывместо этого просто примените простой фильтр к options, через который вы проходите, ко второму Select. 

const options = [
  { label: "foo", value: 1 },
  { label: "bar", value: 2 },
  { label: "bin", value: 3 }
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: false,
      value2: false
    };
  }

  onChange = option => {
    if (this.state.value2.value === option.value) {
      this.setState({
        value1: option,
        value2: false
      });
    } else {
      this.setState({ value1: option });
    }
  };

  onChange2 = option => {
    this.setState({ value2: option });
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.onChange}
          options={options}
          value={this.state.value1}
        />
        <Select
          onChange={this.onChange2}
          options={options.filter(
            option => option.value !== this.state.value1.value
          )}
          value={this.state.value2}
        />
      </div>
    );
  }
}

Рабочий пример

0 голосов
/ 19 июня 2019

Для достижения цели вам нужно сохранить выбранные значения в состоянии, чтобы сравнить их с параметрами в filterOption, как в следующем примере: 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: false,
      value2: false
    };
  }

  filterOption = option => {
    return this.state.value1 !== option.data;
  };

  onChange = option => {
    this.setState({ value1: option });
  };

  onChange2 = option => {
    this.setState({ value2: option });
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.onChange}
          options={options}
          value={this.state.value1}
        />
        <Select
          filterOption={this.filterOption}
          onChange={this.onChange2}
          options={options}
          value={this.state.value2}
        />
      </div>
    );
  }
}

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

...