输入字段onChange to setState值是后面的操作(需要点击)

Question

我一直在想如何实时更新我的按钮。我已经阅读了很多论坛/线程(React form on Change->setState落后一步(，了解如何解决这个问题，但还没能将其应用到我的解决方案中，以获得动态更新正确操作的按钮，落后1步。

constructor(props: EditRole | Readonly<EditRole>) {
super(props);
this.state = {
originalName: '',
name: '',
sealId: '',
rolesSearchPrefix: '',
permittedRoles: '',
sealIdError: '',
oldSealId: '',
oldRolesSearchPrefix: '',
oldPermittedRoles: '',
valueUpdated: false
};
this.saveRole = this.saveRole.bind(this);
this.handleChangeRoles = this.handleChangeRoles.bind(this);
}
componentDidMount() {
this.getRole();
}
getRole() {
store.getRole(this.props.match.params.name).then((res: any) => {
const { name, sealId, rolesSearchPrefix, permittedRoles } = res.data;
this.setState({ originalName: name, sealId, oldSealId: sealId, rolesSearchPrefix, oldRolesSearchPrefix: rolesSearchPrefix, permittedRoles, oldPermittedRoles: permittedRoles });
});
}

handleChangeRoles = (e: Event) => {
this.setState({ ...this.state, permittedRoles: (e.target as HTMLInputElement).value }, () => {
(e.target as HTMLInputElement).value === this.state.oldPermittedRoles ? this.setState({ ...this.state, valueUpdated: false }) : this.setState({ ...this.state, valueUpdated: true });
});
}

正如您在上面的代码中看到的，我正在获取我的角色，并在状态中设置值。这一切都在起作用。然后当我拿到我的表格时：

<form>
<input
id="roles"
label="Roles"
value={this.state.permittedRoles}
// onChange={this.handChangeRoles}
// onChange={(e) => this.setState({ ...this.state, permittedRoles: (e.target as HTMLInputElement).value, valueUpdated: true })}
onChange={(e) => this.handleChangeRoles(e)}
multiline={true}>
</MdsTextInput>
{backButton} {this.state.valueUpdated ? nextButton : disabledButton}
</form>

更新正在正确进行，字符正在更新值，但按钮状态不会改变，直到我点击关闭表单。因此，如果我在输入字段中，值为"；测试"；按钮被禁用。I型"；a"；("testa"(并记录更改，直到我点击输入字段，然后它适当地启用按钮。我希望它能动态更新。我尝试了一些不同的事情(你可以在Changes上看到一些评论(，并尝试了一些对setState进行分层的不同方法(尝试在值之前先设置disable/ennable，尝试使用2个按钮(上面的当前按钮(来显示/隐藏，而不是设置"；禁用"；T/F的属性(。到目前为止，没有一个解决方案立即更新，我不得不等到我点击出来，给我合适的结果。有人知道我的问题是什么吗？

我很感激你抽出时间。

Answer 1

您不需要在设置值后设置状态。由于您没有更新旧的permittedRoles，并且您在onChange事件上有您的PermittetRoles值，因此您也不需要更新状态值，因为您将一起更新它。一个设置状态就足够了，你可以这样实现：

handleRoles = (e: React.ChangeEvent<HTMLInputElement>) => {
const { target } = e;
this.setState((prevState) => ({
...prevState,
permittedRoles: target.value,
valueUpdated: prevState.oldPermittedRoles !== target.value ? true : false
}))
}

当你更新允许的角色时，它也会更新按钮状态