Question

我想做一个无法选择的基于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}]

如果访问= true，则此选择的选项必须显示为灰色且不能删除。我抬起头来this example，但我不明白自己哪里出了问题。谢谢：）

Answer 1

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

这里是live example。

反应-选择如何制作预先选择的固定选项

1 个答案: