реакции-выберите, как сделать предварительно выбранные фиксированные параметры - PullRequest
Новая
       8

реакции-выберите, как сделать предварительно выбранные фиксированные параметры

0 голосов
/ 16 февраля 2019

Я хочу сделать предварительно выбранные параметры, которые нельзя удалить на основе w.был ли клиент посещен или нет, вот чего я хочу достичь enter image description here

const { clients } = this.props.clients;

const listOfClients =
  clients !== null &&
  clients.clients.map(client => ({
    value: client._id,
    label: client.company
      ? client.company
      : client.lastname + " " + client.lastname,
    last_visit: client.last_visit,
    wilaya: client.wilaya,
    visited: client.visited // true : false
  }));

и вот как я отображаю мои выбранные параметры 

<Select
          name="clients"
          isMulti
          value={this.state.clients}
          onChange={e => this.onChange(e, "clients")}
          isClearable={this.state.clients.some(client => !client.visited)}
          options={listOfClients || []}
          className="basic-multi-select"
          classNamePrefix="select"
        />

и мое состояние содержит массив клиентов следующим образом: 

[{value: "5c0e784f0249ea83d88bddf3", label: "sarl medic", visited: true}]

, если посещено = true, тогда эта выбранная опция должна быть серой и не может быть удалена.Я посмотрел этот пример , но я не понимаю, где я ошибся.Спасибо:)

1 Ответ

0 голосов
/ 18 февраля 2019

В ваших listOfClients опциях отсутствуют важные isFixed, это должно быть то же значение, что и visited, если я правильно понимаю ваш код.

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

const listOfClients =
  clients !== null &&
  clients.map(client => ({
    value: client._id,
    label: client.company
      ? client.company
      : client.lastname + " " + client.lastname,
    last_visit: client.last_visit,
    wilaya: client.wilaya,
    visited: client.visited,
    isFixed: client.visited // true : false
  }));

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      clients: []
    };
  }

  onChange = (e, option) => {
    if (option.removedValue && option.removedValue.isFixed) return;

    this.setState({
      clients: e
    });
  };
  render() {
    return (
      <div className="App">
        <Select
          name="clients"
          isMulti
          value={this.state.clients}
          onChange={this.onChange}
          isClearable={!this.state.clients.some(client => client.visited)}
          options={listOfClients || []}
          className="basic-multi-select"
          classNamePrefix="select"
          styles={styles}
        />
      </div>
    );
  }
}

Здесь пример в реальном времени .

...