react-select 如何制作预 selected 固定选项

Question

我想做一个预selected选项，不能根据w删除。是否访问过客户端，这就是我想要实现的

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 选项的方式

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

如果 visited = true ，则此 selected 选项必须变灰且无法删除。我查过 this example 但我不明白哪里出错了。谢谢:)

Answer 1

您的 listOfClients 选项缺少重要的 isFixed，如果我正确理解您的代码，它应该与 visited 的值相同。

对于 multi select，您还需要像下面的代码一样手动禁用删除功能：

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>
    );
  }
}

这里是live example.

react-select 如何制作预 selected 固定选项

react-select how to make a pre selected fixed options

reactjs

react-select