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

Question

I am using a react Modal to show up when u want to edit a user. However when I cancel the Modal, and click back on it the two error messages are still there beneath the input fields. How can I resolve this?

<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:

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

Answer 1

You have to reset state keys you use on modal view after closing modal.

Reset state keys inside toggleEditUserModal method

Edit: added example

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

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

Answer 2

在toggleEditUserModal中调用父函数以刷新父状态