如何制作交互式 ReactJS 表单

访问您的 Web 应用程序的用户心中都有一个特定的目标。表单是一种媒介，它允许用户与您联系并发送信息（例如订单、目录请求，甚至是查询），这些信息会被传递给其他流程。

清晰、智能的表单设计可以帮助用户快速实现目标。相反，糟糕的表单设计会造成混乱，甚至阻碍用户与应用程序的交互。

因此，我们同意良好的表单对您的应用程序有益，并能让用户感到满意。然而，在 React 中实现良好的表单需求似乎很难：动态表单、实时响应式反馈以及创建良好的用户体验。在components、states和的框架下，我们该如何满足这些需求呢props？

我们可以获得的第一个提示当然来自有关表单的 React 文档。

handleChange = e => {
  this.setState({ value: e.target.value })
}

// ...

<input
  onChange={this.handleChange}
  value={this.state.value}
/>

这基本上就是 React 表单文档的总结。它只是告诉你 React 应该如何处理用户的点击或按键。React 将用户的值设置为 state，然后将该 state 作为输入的值。结束。

啊？就这样？

是的。至于你在为一个业务逻辑复杂的应用程序构建表单时会遇到的其他问题……那就由你来决定了。比如：

验证
显示错误
跟踪表单字段
处理提交

正如文档中所述，React 对于项目结构和库堆栈的选择非常宽容。这也意味着它只提供了创建表单组件所需的最基本功能。component，state，props就像拼图块一样，我们需要自己将它们拼凑起来。

这是您从本教程中获得的最终产品：

使用 React 制作表单时需要记住 3 个基本原则，它们是：

component用于渲染表单元素，通常是 JSX 元素
state用于跟踪用户的输入
props用于将数据传递到 JSX 元素

无论您尝试创建哪种形式，只要记住这 3 个基本原则，就可以了。

基本 React 表单

React 中的所有内容都是组件，包括表单，React 用来state跟踪输入值。这是一个用 React 编写的示例表单。

class BasicForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name:'',
      email: '',
    };
  }

  handleNameChange = (event) => {
    this.setState({name: event.target.value});
  }

  handleEmailChange = (event) => {
    this.setState({email: event.target.value});
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { name, email } = this.state
    alert(`Your state values: \n 
            name: ${name} \n 
            email: ${email}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Name</label>
          <input name="name" className="form-control" id="name" placeholder="Enter name" value={this.state.name} onChange={this.handleNameChange} />
        </div>
        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input name="email" className="form-control" id="email" placeholder="Enter email" value={this.state.email} onChange={this.handleEmailChange} />
        </div>
        <button type="submit" className="btn btn-success btn-block">Submit</button>
      </form>
    );
  }
}

哇！这段代码是干什么用的？

别担心，代码不会咬人！现在就让我来解释一下。

我们从开始state。React 表单使用state作为字段值的唯一真实来源。这意味着input表单上的每个元素都component将以statevalue 作为其值。

this.state = {
  name:'',
  email: '',
};

然后将状态值赋值给inputtags value prop。我们还添加了一个onChange prop，它会在每次输入值更改时运行。最后，我们还在onSubmit表单组件中添加了 prop 来处理提交操作。

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input name="name" className="form-control" id="name" placeholder="Enter name" 
        // value and onChange prop
          value={this.state.name} 
          onChange={this.handleNameChange} />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input name="email" className="form-control" id="email" placeholder="Enter email" 
        // value and onChange prop
          value={this.state.email} 
          onChange={this.handleEmailChange} />
      </div>
      <button type="submit" className="btn btn-success btn-block">Submit</button>
    </form>
  );
}

接下来，我们可以添加一个handleChange接受参数的方法event。这个事件对象将保存我们的输入名称和值。

handleNameChange = (event) => {
  this.setState({name: event.target.value});
}

handleEmailChange = (event) => {
  this.setState({email: event.target.value});
}

表单结构的最后一部分是提交处理程序方法。在此示例中，我们使用了一个handleSubmit简单调用警告框并打印出状态值的方法。

handleSubmit = (event) => {
  event.preventDefault();
  const { name, email } = this.state
  alert(`Your state values: \n 
          name: ${name} \n 
          email: ${email}`)
}

与常规 HTML 表单一样，这是执行和处理保存或发送数据的地方。由于我们使用自己的 JavaScript 代码来处理提交，因此需要event.preventDefault()在提交方法中添加此代码。这是因为浏览器的 JavaScript 监听器设置为监听表单提交事件，该事件通常会触发页面重新加载。通过使用此代码preventDefault，我们可以告诉浏览器停止执行其默认方法。这样，页面重新加载就会停止，我们的提交方法就可以运行了。

进行验证

传统的数据验证方式是提交表单，等待服务器完成验证，然后网页会刷新并显示错误信息。这个过程耗时耗力，对用户来说也十分繁琐。

由于 React 是一个前端库，它可以通过在表单组件中内置即时验证来解决这个问题。事实上，这是 React 应用程序中的一种常见模式，而且在我看来非常棒。

由于 React 将所有表单数据存储在状态中，我们可以在数据无效之前进行一些检查render，并显示错误消息。例如，要验证名称长度是否超过 3 个字符，我们可以使用：

render(){
  const isValidName = this.state.name.length > 3
  const isValidEmail = this.state.email.length > 3
}

然后将其放在上下文中：

// the render method

render() {
  const isValidName = this.state.name.length > 3;
  const isValidEmail = this.state.email.length > 3;
  return (
    <form onSubmit={this.handleSubmit}>
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input
          name="name"
          className={`form-control ${ isValidName? '':'is-invalid' }`}
          id="name"
          placeholder="Enter name"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
        {/*feedback here*/}
      { isValidName? null: <div className='invalid-feedback'>Name must be longer than 3 characters</div> }
      </div>
      <div className="form-group">

        {/*after email input*/}
      { isValidEmail? null: <div className='invalid-feedback'>Email must be longer than 3 characters</div> }
      </div>
      <button type="submit" className="btn btn-success btn-block">
        Submit
      </button>
    </form>
  );
}

表单会立即进行验证，当名称长度超过 3 个字符时，错误消息就会消失。但这种验证方式并非最佳，因为我们将验证逻辑放在了 render 方法中，这会导致在验证大量数据时，该方法很快就会变得杂乱无章。而且，验证过程甚至在我们对文本框进行任何操作之前就已经运行了。这很不妙。

使用状态进行错误检查

正如我们使用状态进行数据输入一样，我们也可以使用状态进行验证。我们将在状态初始化中添加新的 state 属性。

this.state = {
  name: '',
  email: '',
  nameError: '',
  emailError: ''
}

状态formError将保存我们的错误消息，我们将使用它们来显示任何可能遇到的错误消息。让我们通过创建新的验证函数来将它们放入上下文中：

handleNameChange = event => {
  this.setState({ name: event.target.value }, () => {
    this.validateName();
  });
};

handleEmailChange = event => {
  this.setState({ email: event.target.value }, () => {
    this.validateEmail();
  });
};

validateName = () => {
  const { name } = this.state;
  this.setState({
    nameError:
      name.length > 3 ? null : 'Name must be longer than 3 characters'
  });
}

validateEmail = () => {
  const { email } = this.state;
  this.setState({
    emailError:
      email.length > 3 ? null : 'Email must be longer than 3 characters'
  });
}

这样，只有当用户在输入框中输入内容时，验证方法才会运行。现在我们要做的最后一件事是，当用户点击一个文本框时运行验证，然后移动点击另一个文本框而不执行任何操作。

添加 onBlur

让我们onBlur向输入元素添加一个道具。

<input
  name='name'
  // className, id, onChange ...
  onBlur={this.validateName}
/>

<input
  name='email'
  // className, id, onChange ...
  onBlur={this.validateEmail}
/>

现在，验证方法将在用户“触摸”的相应文本框上运行，然后显示任何错误消息（如果有）。

以下是演示：

结论

现在是时候总结一下我们从这个简单示例中学到的知识了。让我们再次重申一下 React 表单的 3 个基本原则：

component用于渲染表单元素，通常是 JSX 元素
state用于跟踪用户的输入
props用于将数据传递到 JSX 元素

我们已经了解了这是 React 表单中一个久经考验的原则。我们编写了一个用于component渲染 JSX 表单的组件。我们用它来state跟踪name值email，并使用 props 将数据从状态值传递到输入值，包括将handleChange函数传递给onChangeprops。

对于不熟悉 React 数据处理方式的人来说，在 React 中创建表单是一项相当复杂的任务。如果您需要一些关于 React 表单的高级指南，我建议您查看 Arinich 的高质量React 表单教程。它可以帮您节省大量时间。

感谢阅读！如果你喜欢这类文章，请务必关注我。我很快会写更多关于 React 的教程。

文章来源：https://dev.to/codewithnathan/react-form-real-time-validation-using-state-1eeg