关闭 ReactJS 后清除模态内的表单

在使用 ReactJS 时，经常需要展示模态框（Modal）来提示用户或接收用户输入。当模态框被关闭后，需要清除模态框内的表单数据，以避免下次打开模态框时出现未清空的数据。

在模态框中使用受控组件

为了实现模态框内表单数据的清空，我们需要为表单中的每个输入框创建受控组件。受控组件支持在 React 的 state 中存储表单数据，并响应用户输入的变化。它可以确保在模态框被关闭后清空表单数据。

下面是一个示例受控表单组件：

class MyForm extends React.Component {
  state = {
    username: '',
    password: '',
    rememberMe: false
  };

  handleUsernameChange = (event) => {
    this.setState({ username: event.target.value });
  };

  handlePasswordChange = (event) => {
    this.setState({ password: event.target.value });
  };

  handleRememberMeChange = (event) => {
    this.setState({ rememberMe: event.target.checked });
  };

  handleSubmit = (event) => {
    event.preventDefault(); // 防止表单提交
    console.log(this.state);
  };

  render() {
    const { username, password, rememberMe } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          用户名:
          <input type="text" value={username} onChange={this.handleUsernameChange} />
        </label>
        <br />
        <label>
          密码:
          <input type="password" value={password} onChange={this.handlePasswordChange} />
        </label>
        <br />
        <label>
          记住我:
          <input type="checkbox" checked={rememberMe} onChange={this.handleRememberMeChange} />
        </label>
        <br />
        <button type="submit">提交</button>
      </form>
    );
  }
}

在上面的示例中，我们使用 state 存储表单数据，并使用 value 属性将表单输入框与 state 中的数据绑定。对于复选框，我们使用 checked 属性绑定 state 中的数据。同时，我们实现了 onChange 事件处理函数来响应用户输入。最后，我们定义了 handleSubmit 方法来防止表单默认行为并输出 state 中的数据。

清除表单数据

当模态框需要被关闭时，我们需要清空表单数据。在 React 中，我们可以使用 setState 方法来重置 state 中的表单数据。例如，如果我们的 MyForm 组件被包含在一个模态框中，并且模态框被关闭时应该清空表单数据，可以这样实现：

class MyModal extends React.Component {
  state = {
    showModal: false
  };

  handleClose = () => {
    this.setState({ showModal: false });
  };

  handleShow = () => {
    this.setState({ showModal: true });
  };

  handleEnter = () => {
    console.log('Modal is entered');
  };
  
  handleExited = () => {
    console.log('Modal is exited');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleShow}>打开模态框</button>

        <Modal show={this.state.showModal} onHide={this.handleClose} onEnter={this.handleEnter} onExited={this.handleExited}>
          <Modal.Header closeButton>
            <Modal.Title>这是一个模态框</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <MyForm />
          </Modal.Body>

          <Modal.Footer>
            <button onClick={this.handleClose}>关闭</button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

在上面的代码中，我们使用 setState 触发 MyForm 组件的 render 方法，并在 render 方法中将所有表单数据重置为初始值：

render() {
  const { showModal } = this.state;

  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        用户名:
        <input type="text" value={showModal ? '' : username} onChange={this.handleUsernameChange} />
      </label>
      <br />
      <label>
        密码:
        <input type="password" value={showModal ? '' : password} onChange={this.handlePasswordChange} />
      </label>
      <br />
      <label>
        记住我:
        <input type="checkbox" checked={showModal ? false : rememberMe} onChange={this.handleRememberMeChange} />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

如上所示，我们仅仅将组件的状态重置为初始状态。由于表单输入框的 value 属性已经绑定了状态，因此表单数据将会被自动清空。

总结

使用受控组件和 setState 方法，我们可以轻松实现在 ReactJS 中清空模态框内的表单数据。