Как разрешить реагировать на семантические выпадающие списки пользовательского интерфейса, которые повторяют отображение разных значений

Question

У меня есть метод в моем React Component, где на основе числового значения я отображаю ряд компонентов. Проблема, с которой я сталкиваюсь, заключается в том, что когда я выбираю для компонента, то же значение выбирается в этом компоненте для другой строки.

Вот мой код

showSkillsModalCategoryUI = () => {
    const {
      startDate,
      endDate,
      errors,
      reviewerSearch: {
        contentAreaSkills,
        otherSkills,
        numOfDaysForReview,
        numOfReviewerPositions,
      },
    } = this.state;

    var data = [];
    var length = numOfReviewerPositions; // user defined length

    for (var i = 0; i < length; i++) {
      data.push('undefined');
    }

    const row = data.map((position, index) => {
      return (
        <div key={index}>
          <div className="ui grid">
            <div className="three wide column">
              <Form.Field
                name="numOfDaysForReview"
                label=""
                placeholder="# of days"
                value={numOfDaysForReview}
                onChange={this.handleSearchFilterChange}
                category={'numOfDaysForReview'}
                control={AmsLookupDropdown}
                fluid
                search
                selection
              />
            </div>
            <div className="four wide column">
              <Form.Group>
                <Form.Field
                  name="startDate"
                  control={DatePicker}
                  placeholder="Please select start Date"
                  isClearable={true}
                  selected={startDate && startDate}
                  selectsStart
                  minDate={moment()}
                  startDate={startDate && startDate}
                  onChange={this.handleStartDateChange}
                />
                <Form.Field
                  name="endDate"
                  control={DatePicker}
                  placeholder="Please select end date"
                  isClearable={true}
                  selected={endDate && endDate}
                  selectsEnd
                  startDate={startDate && startDate}
                  minDate={startDate && startDate}
                  endDate={endDate}
                  onChange={this.handleEndDateChange}
                />
              </Form.Group>
            </div>
            <div className="three wide column">
              <Form.Field
                name="languageSkills"
                label=""
                placeholder="Language"
                defaultValue={'English'}
                onChange={(e, { value }) =>
                  this.setState({
                    ...this.state,
                    reviewerSearch: {
                      ...this.state.reviewerSearch,
                      languageSkills: value,
                    },
                  })
                }
                category={'languages'}
                control={AmsLookupDropdown}
                fluid
                multiple
                search
                selection
              />
            </div>
            <div className="three wide column">
              <Form.Field
                error={!!errors.contentAreaSkills}
                name="contentAreaSkills"
                label=""
                placeholder="Content"
                value={contentAreaSkills}
                onChange={(e, { value }) =>
                  this.setState({
                    ...this.state,
                    reviewerSearch: {
                      ...this.state.reviewerSearch,
                      contentAreaSkills: value,
                    },
                  })
                }
                category={'contentAreaSkills'}
                control={AmsLookupDropdown}
                fluid
                multiple
                search
                selection
              />
            </div>
            <div className="three wide column">
              <Form.Field
                name="otherSkills"
                width={14}
                label=""
                placeholder="Other"
                value={otherSkills}
                onChange={(e, { value }) =>
                  this.setState({
                    ...this.state,
                    reviewerSearch: {
                      ...this.state.reviewerSearch,
                      otherSkills: value,
                    },
                  })
                }
                category={'otherSkills'}
                control={AmsLookupDropdown}
                fluid
                multiple
                search
                selection
              />
            </div>
          </div>
        </div>
      );
    });
    return row;
  };

Например, если у меня есть 3 строки этих компонентов, и я выбираю язык, например английский. Все языковые элементы управления в каждой строке будут иметь английский язык, и если я попытаюсь изменить их в каждой строке, все изменится. Поэтому я не могу выбрать отдельное значение.

Answer 1

Все ваши строки используют одно и то же состояние, вам нужно создать массив состояний, который принимает индекс вашей карты, чтобы каждая строка имела независимое состояние, например:

 onChange={(e, { value }) =>
      this.setState({
      ...this.state,
     ['stateOfRow' + index]: theState ....
   )
 }

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

Чтобы применить это к вашему случаю, код будет выглядеть следующим образом:

Состояние:

  const {
    startDate,
    endDate,
    errors,
    rowState // <== this is an Array []
  } = this.state;

Порция, если код:

    <Form.Field
      name="otherSkills"
      width={14}
      label=""
      placeholder="Other"
      value={rowState[index].reviewerSearch.otherSkills}
      onChange={(e, { value }) => {
        this.setState(prevState => ({
          rowState: [
           ...prevState,
           [rowState[index]],
           {
             reviewerSearch: {
              ...prevState.rowState[index].reviewerSearch,
              otherSkills: value,
            },
           },
          ],
        }));
      }}
      category={"otherSkills"}
      control={AmsLookupDropdown}
      fluid
      multiple
      search
      selection
    />