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

Question

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

<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: ''
    }
};

Answer 1

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

重置 toggleEditUserModal 方法中的状态键

编辑：添加示例

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

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

Answer 2

调用toggleEditUserModal里面的parent函数刷新parent的状态

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

Input validation error message doesnt go away in React

javascript

validation

input

modal-dialog

reactjs