ReactJs:即使事件已正确触发，DropDown事件值也被设置为空字符串 [英] ReactJs : DropDown Event Value gets set to empty string despite the event having been triggered correctly

问题描述

OperationSavDetails.js

OperationSavDetails.js

class OperationSavDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      statusUpdateDropDownOpen: false,
      statusUpdateDropDownValue: "Mettre à jour le status de l'opération SAV"
    };

    this.changeStatusUpdateDropDownValue = this.changeStatusUpdateDropDownValue.bind(
      this
    );
    this.toggleStatusUpdateDropDown = this.toggleStatusUpdateDropDown.bind(
      this
    );
  }

  changeStatusUpdateDropDownValue(e) {

    console.log("e.currentTarget.textContent");
    console.log(e.currentTarget.textContent);
    this.setState({
      statusUpdateDropDownValue: e.currentTarget.textContent
    });

  }
  toggleStatusUpdateDropDown() {
    this.setState({
      statusUpdateDropDownOpen: !this.state.statusUpdateDropDownOpen
    });
  }
  render() {
    const { isAuthenticated, user } = this.props.auth;
    const DefaultDropDownValues = (
      <Row className="align-items-center">
        <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
          <Dropdown
            isOpen={this.state.statusUpdateDropDownOpen}
            toggle={() => {
              this.toggleStatusUpdateDropDown();
            }}
          >
            <DropdownToggle className="my-dropdown" caret>
              {this.state.statusUpdateDropDownValue}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>
                {" "}
                <div
                  value="repare"
                  onClick={this.changeStatusUpdateDropDownValue}
                >
                  Default DropDown
                </div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>{" "}
        </Col>
      </Row>
    );
    const operateurSavDropDownValues = (
      <Row className="align-items-center">
        <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
          <Dropdown
            isOpen={this.state.statusUpdateDropDownOpen}
            toggle={() => {
              this.toggleStatusUpdateDropDown();
            }}
          >
            <DropdownToggle className="my-dropdown" caret>
              {this.state.statusUpdateDropDownValue}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>
                {" "}
                <div
                  value="repare"
                  onClick={this.changeStatusUpdateDropDownValue}
                >
                  Réparé
                </div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>{" "}
        </Col>
      </Row>
    );

    return (
      <div className="animated fadeIn">
        {user.role === "operateur_sav"
          ? operateurSavDropDownValues
          : DefaultDropDownValues}
      </div>
    );
  }
}

它呈现此下拉按钮:
根据 user.role ，它将呈现不同的下拉值.
当用户单击下拉值时，将使用以下功能在状态值 statusUpdateDropDownValue 中对其进行更新:

It renders this dropDown button:
Depending on user.role, it will render different dropdown values.
When the user clicks on a dropdown value, it gets updated in the state value statusUpdateDropDownValue with this function:

changeStatusUpdateDropDownValue(e) {
    console.log("e.currentTarget.textContent");
    console.log(e.currentTarget.textContent);
    // Logs this: Réparé
    this.setState({
      statusUpdateDropDownValue: e.currentTarget.textContent
    });
  }

日志结果是正确的.但是* ，为 statusUpdateDropDownValue (未单击时在下拉按钮上显示的值)分配了 null 或空字符串:

而我得到这个错误:

The log result is correct. However*, the statusUpdateDropDownValue (which is the value that gets displayed on the dropdown button when it's not clicked) is assigned either null or an empty string:

And I get this error:

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `currentTarget` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/docs/events.html#event-pooling for more information.

我已遵循错误中提供的链接，但我仍然无法不会得到为什么尽管正确记录了选定的下拉值，但仍无法正确更新状态

I have followed the link provided in the error and I still couldn't get why despite the fact that the selected dropdown value is logged correctly, it does not get updated in the state correctly

推荐答案

可能是由于您在setState中使用事件值而发生的，这是一个异步操作.当函数执行完成时，JavaScript默认情况下会将事件及其所有属性无效.尝试将所需的值保存在变量中，然后将其传递给setState函数，而不要尝试访问该事件(因为JavaScript已将其无效).

Probably this happened because you are using event value in setState, which is an async action. JavaScript by default nullifies the event and all of its properties, when the function execution finishes. Try saving the value you need in a variable and then pass it to setState function instead of trying to access the event (since it will already be nullified by JavaScript).

这篇关于ReactJs:即使事件已正确触发，DropDown事件值也被设置为空字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！