Реагировать - event.target возвращает innerText ранее щелкнутого элемента вместо текущего щелкнутого элемента

Я создал раскрывающееся меню, которое возвращает выбранный параметр через обработчик событий при нажатии на этот параметр.

Когда я нажимаю на опцию, я нацеливаюсь на innerText этой опции через event. Выглядит это так: event.target.innerText. Выбранное целевое значение затем используется для заполнения «ввода», чтобы показать выбранное пользователем значение. Именно так, как вы ожидаете, будет работать вход <select>. Целевое значение также используется для фильтрации перечисленных компонентов, но меня здесь беспокоит не это.

Когда компонент раскрывающегося меню загружается внутри метода componentDidMount(), состояние обновляется значением по умолчанию, так что раскрывающиеся меню загружаются с предварительно заполненным первым параметром (это делается для того, чтобы они не были пустыми до того, как пользователь выберет элемент). вариант).

Когда я нажимаю на опцию, чтобы сделать выбор, возвращаемый event.target.innerText относится к предыдущему выбору. Итак, если option 1 было значением по умолчанию при монтировании компонента, а затем я выбираю option 2 и console.info результат, значение будет option 1. Если я затем выберу другой вариант, option 3, возвращенным console.info() будет option 2. Это один позади.

На этом .gif вы можете видеть, что когда componentDidMount() срабатывает, это console.info() значения по умолчанию в раскрывающемся меню. Но когда я делаю выбор, вы заметите, что console.info() возвращает только event.target.innerText ранее выбранной опции.

Вот компонент:

class DropDownSelect extends Component {
  constructor(props) {
    const { inputOptions } = props;
    const { option1 } = inputOptions;
    super(props);

    this.state = {
      showOptions: false,
      selectionMade: option1
    };
  }

  setShowOptions = () => {
    const { showOptions } = this.state;
    this.setState(prevState => ({ showOptions: !prevState.showOptions }));
  };

  setSelectionMade = event => {
    const { target } = event;
    event.stopPropagation();

    this.setShowOptions();
    this.setState({ selectionMade: target.innerText });
    console.info(this.state.selectionMade);
  };

  setDefaultSelectionOnLoad = () => {
    const { inputOptions } = this.props;
    this.setState({ selectionMade: inputOptions.option1 });
  };

  componentDidMount() {
    this.setDefaultSelectionOnLoad();
    console.info(this.state.selectionMade);
  }

  render() {
    const { showOptions, selectionMade } = this.state;
    const { inputOptions } = this.props;

    const inputOptionsArray = Object.keys(inputOptions);

    return (
      <DropDownSelectMenu>
        <DropDownSelectPlaceholder onClick = {this.setShowOptions}>
          <p>{selectionMade}</p>
          <i>
            <FontAwesomeIcon icon = {faCaretDown} />
          </i>
        </DropDownSelectPlaceholder>

        {showOptions ? (
          <DropDownSelectOptions>
            {inputOptionsArray.map((key, index) => {
              return (
                <DropDownOption
                  onClick = {event => {
                    this.setSelectionMade(event);
                  }}
                  key = {index}
                >
                  {inputOptions[key]}
                </DropDownOption>
              );
            })}
          </DropDownSelectOptions>
        ) : null}
      </DropDownSelectMenu>
    );
  }
} 

Компонент стиля DropDownOption — это место, где функция, которая обновляет выделение в состоянии, добавляется в качестве обработчика onClick. Поскольку этот компонент является дочерним, и вам нужно щелкнуть родительский компонент, чтобы открыть компонент DropDownOption, я подумал, что, возможно, обработчик событий всплывает и захватывает значение event.target у родителя, поэтому я добавил event.stopPropagation() в функцию обработчика событий setSelectionMade() . Это ничего не сделало для меня.