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
:
changeStatusUpdateDropDownValue(e) {
console.log("e.currentTarget.textContent");
console.log(e.currentTarget.textContent);
// Logs this: Réparé
this.setState({
statusUpdateDropDownValue: e.currentTarget.textContent
});
}
日志结果正确。 但是*,statusUpdateDropDownValue
(未单击下拉按钮时显示的值)被指定为 null
或 <强>空字符串:
我收到这个错误:
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.
我已关注link错误中提供,但我仍然无法理解为什么尽管所选下拉值已正确记录,但它没有在状态中正确更新
最佳答案
发生这种情况可能是因为您在 setState 中使用事件值,这是一个异步操作。默认情况下,当函数执行完成时,JavaScript 会使事件及其所有属性无效。尝试将所需的值保存在变量中,然后将其传递给 setState 函数,而不是尝试访问事件(因为它已经被 JavaScript 取消)。
关于javascript - ReactJs : DropDown Event Value gets set to empty string despite the event having been triggered correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60544186/