输入验证错误消息在 React 中不会消失

debugcn 发表于 Dev

Y_Lakdime

当你想编辑用户时，我正在使用反应模式来显示。但是，当我取消模态并单击它时，输入字段下方仍然存在两条错误消息。我该如何解决这个问题？

<Modal isOpen={this.state.editUserModal}
       toggle={this.toggleEditUserModal.bind(this)}>
    <ModalHeader toggle={this.toggleEditUserModal.bind(this)}>
        Edit user
    </ModalHeader>
    <ModalBody>
        <FormGroup>
            <Label for="name">Name</Label>
            <Input required={true} id="name" value=
                {this.state.editUserData.name} onChange={(e) => {
                let {editUserData} = this.state;

                editUserData.name = e.target.value;

                this.setState({editUserData});
            }}/>
            <div style={{fontSize: 12, color: 'red'}}>{this.state.nameError}</div>
        </FormGroup>
        <FormGroup>
            <Label for="job">Job</Label>
            <Input required={true} id="job" value={this.state.editUserData.job} onChange={(e) => {
                let {editUserData} = this.state;

                editUserData.job = e.target.value;

                this.setState({editUserData});
            }}/>
            <div style={{fontSize: 12, color: 'red'}}>{this.state.jobError}</div>
        </FormGroup>

    </ModalBody>
    <ModalFooter>
        <Button color="primary" onClick={this.updateUser.bind(this)}>Update User</Button>{' '}
        <Button color="secondary" onClick={this.toggleEditUserModal.bind(this)}>Cancel</Button>
    </ModalFooter>
</Modal>

状态：

state = {
  users: [],
    name: '',
    job: '',
    nameError: '',
    jobError: '',
    editUserData: {
      id: '',
        name: '',
        job: ''
    }
};

米克波克

关闭模态后，您必须重置在模态视图上使用的状态键。

在toggleEditUserModal方法中重置状态键

编辑：添加示例

toggleEditUserModal() {
    // ... your current logic

   // Set state below only in case modal has been closed
   this.setState({ 
       nameError: null, 
       jobError: null 
   })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。