React - event.target返回先前單擊的元素的innerText，而不是當前單擊的元素

Question

我創建了一個下拉菜單，在單擊該選項時通過事件處理程序返回所選選項。

當我單擊該選項時，我通過event定位該選項的innerText 。 它看起來像這樣： event.target.innerText 。 然后使用所選目標值填寫“輸入”以顯示用戶選擇的值。 究竟如何期望<select>輸入工作。 目標值也用於過濾列出的組件，但這不是我在這里擔心的。

在下拉菜單組件加載時，在componentDidMount()方法內部，使用默認值更新狀態，以便下載菜單加載預先填充的第一個選項（這樣它們在用戶之前不會為空選擇一個選項）。

當我單擊選項進行選擇時，返回的event.target.innerText屬於上一個選擇。 因此，如果option 1是組件安裝時的默認值，然后我選擇option 2和console.log結果，則值將為option 1 。 如果我然后選擇另一個選項， option 3 ，則返回的console.log()將是option 2 。 它落后了。

在這個.gif文件中，你可以看到當componentDidMount()觸發時，它的console.log()是下拉菜單的默認值。 但是當我做出選擇時，你會注意到console.log()只返回先前選擇的選項的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.log(this.state.selectionMade);
  };

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

  componentDidMount() {
    this.setDefaultSelectionOnLoad();
    console.log(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() 。 這對我沒有任何作用。

Answer 1

你的代碼工作正常，只有這個調試方法失敗;）

這是反應中最常見的錯誤 - 在setState調用之后立即期待狀態更新。

請閱讀文檔 。 可以在setState回調中讀取值。

您可以在render簡單地console.log(selectionMade) （在return ( ）之前獲取當前值。