时间戳

首页 > 解决方案 > react-select 如何制作预先选择的固定选项

reactjs - react-select 如何制作预先选择的固定选项

问题描述

我想根据 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
          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 ，那么这个选择的选项必须是灰色的并且不能被删除。我已经查看了这个例子，但我不明白我哪里出错了。谢谢 ：）

标签： reactjsreact-select

解决方案

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

这里有一个活生生的例子。

推荐阅读