时间戳

首页 > 解决方案 > 在 react-select 中处理多个选择行

reactjs - 在 react-select 中处理多个选择行

问题描述

我正在使用React-Select 库在 react 中生成选择选项，正如您将在提供的屏幕截图中看到的那样。这个概念很简单，我有一个按钮来添加一个新行，该行有一个选择选项来输入客户，另一个输入来插入日期。单击加号按钮后，它将添加一个新行，以填充我已经解释过的确切信息。请看截图。 在此处输入图像描述

当每一行的数据发生变化时，我在填充我的状态时遇到问题，所以数组中的每个对象代表一行，以下是我的状态

this.state = {
    customClients: [
     {
      date: null,
      clients: [{ value: "", label: "" }]
    }
    ]
  }

这是我的渲染方法的一个片段

{this.state.customClients.map((client, i) => {
      let cli_id = `cli-${i}`;
      let date_id = `date-${i}`;
      return (
        <div className="row" key={i} id={i}>
          <div className="col-md-4">
            <p className="mb-1 mt-3 font-weight-bold text-muted">Clients</p>
            <Select
              name="clients"
              inputId={cli_id}
              isMulti
              value={client.clients}
              onChange={this.handleCustomClients}
              options={clients || []}
              className="basic-multi-select"
              classNamePrefix="select"
            />
          </div>

          <div className="col-md-8">
            <div className="form-group">
              <p className="mb-1 mt-3 font-weight-bold text-muted">Date</p>
              <DatePicker
                name="date"
                id={date_id}
                className="form-control"
                selected={client.date}
                onChange={this.handleCustomClients}
                minDate={new Date()}
              />
            </div>
          </div>
        </div>
      );
    })}

标签： reactjsreact-select

解决方案

由于您正在更改在数组中引用的对象，因此您需要传递要编辑的记录的索引。首先让我们更新onChange事件并传递索引

<Select
        name="clients"
        inputId={cli_id}
        isMulti
        value={client.clients}
        onChange={e => this.handleCustomClients(e, i)}
        options={clients || []}
        className="basic-multi-select"
        classNamePrefix="select"
/>

以及下面的方法

handleCustomClients(e, i) {
    this.setState(prevState => {
      return (prevState.customClients[i].clients = e);
    });
}

代码沙箱https://codesandbox.io/s/rm1k8oor7o

干杯!

推荐阅读