Question

我创建了一个下拉菜单，当单击选项时，该菜单会通过事件处理程序返回选定的选项。

当我单击选项时，我通过innerText定位了该选项的event。看起来像这样：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

您的代码工作正常，只有此调试方法失败;）

这是react中最常见的错误-预期状态会在setState调用后立即更新。

请阅读docs。可以在setState回调中读取值。

您只需在console.log(selectionMade)中的render中return (即可获取当前值。

React-event.target返回先前单击的元素的innerText而不是当前单击的元素

1 个答案: