ReactJs: значение события DropDown устанавливается в пустую строку, несмотря на то, что событие было запущено правильно - PullRequest
Новая
       85

ReactJs: значение события DropDown устанавливается в пустую строку, несмотря на то, что событие было запущено правильно

0 голосов
/ 05 марта 2020

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>
    );
  }
}

Отображает эту кнопку dropDown :
enter image description here В зависимости от user.role, он будет отображать различные раскрывающиеся значения .
Когда пользователь нажимает на раскрывающееся значение , он обновляется в значении состояния statusUpdateDropDownValue с помощью этой функции: 

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

Результат log правильный. Однако *, statusUpdateDropDownValue (то есть значение, которое отображается на выпадающей кнопке, когда она не нажата) присваивается либо null, либо пустая строка :
enter image description here
И я получаю это ошибка : 

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.

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

1 Ответ

1 голос
/ 05 марта 2020

Возможно, это произошло потому, что вы используете значение события в setState, которое является асинхронным c действием. JavaScript по умолчанию обнуляет событие и все его свойства после завершения выполнения функции. Попробуйте сохранить нужное значение в переменной и затем передать его в функцию setState вместо попытки доступа к событию (поскольку оно уже будет аннулировано JavaScript).

...