如何在 React 中使用 HTML 表单

2020-06-05 08:00:00 · 飞浪

介绍表单是任何Web应用程序的重要组成部分。它们用于搜索字段、联系表单、购物结账、登录或注册以及许多其他用途。当您想要从用户那里收集数据时，表单是必需的。表单从前端获取输入并将其发送到

介绍

表单是任何 Web 应用程序的重要组成部分。它们用于搜索字段、联系表单、购物结账、登录或注册以及许多其他用途。当您想要从用户那里收集数据时，表单是必需的。表单从前端获取输入并将其发送到后端服务。

在 React 中构建表单与其他框架略有不同，因为您需要自己处理表单输入和验证。在本指南中，您将学习如何在 React 世界中创建表单并提高其技能。

React 中的表单

React 中的表单有两种类型，根据数据管理方式的不同而有所差异：受控表单和非受控表单。如果 DOM 处理数据，则表单为非受控表单；如果表单组件的状态管理数据，则表单为受控表单。

这是一个不受控制的表单组件的示例。

      class UncontrolledForm extends React.Component {
  constructor() {
    this.nameInput = React.createRef();
  }

  submitFormHandler = (event) => {
    event.preventDefault();
    console.log(this.nameInput.current.value);
  };

  render() {
    return (
      <form onSubmit={this.submitFormHandler}>
        <div>
          <input type="text" name="name" ref={this.nameInput} />
        </div>
      </form>
    );
  }
}
    

不受控制的表单依赖 DOM 来记住表单输入，并使用ref从输入中获取值。input标签中的ref prop 将允许您访问输入元素的值和其他 DOM 属性。这种方法的缺点是，每次访问时您都需要从ref中提取值；当您有多个字段值时，这可能会令人沮丧。

在受控表单中，呈现表单的 React 组件负责处理和管理本地状态中的表单值。这样，每当表单值发生变化时，都可以立即从状态中访问它，而无需使用ref提取值。这种方法被认为比使用不受控的表单更有效，因为您不必访问组件中的原生输入元素。

看看下面的例子。

      class ControlledForm extends React.Component {
  constructor() {
    this.state = {
      values: {
        name: "",
      },
    };
  }

  submitFormHandler = (event) => {
    event.preventDefault();
    console.log(this.state.values);
  };

  inputChangeHandler = (event) => {
    this.setState({ values: { [event.target.name]: event.target.value } });
  };

  render() {
    const { values } = this.state;
    return (
      <form onSubmit={this.submitFormHandler}>
        <div>
          <input
            type="text"
            name="name"
            value={values.name}
            onChange={this.inputChangeHandler}
          />
        </div>
      </form>
    );
  }
}
    

如您在上面的代码中看到的，输入元素附加了 value和onChange属性。每当输入值发生变化时，就会触发一个更改处理程序方法，该方法将输入的值存储在组件的状态中，而 value属性将状态中的当前值分配给输入元素。这样，表单值在提交处理程序中立即可用。

错误处理

现在您已经了解了 React 中的不同表单，请看一下如何处理 React 中的表单错误。

非受控表单依赖原生 HTML5 输入元素进行验证，但部分浏览器尚未完全支持原生验证，可能会导致跨浏览器兼容性问题。相比之下，非受控表单的错误处理由组件状态完成。

      class ControlledForm extends React.Component {
  constructor() {
    this.state = {
      values: {
        name: "",
      },
    };
  }

  submitFormHandler = (event) => {
    event.preventDefault();
    if (this.state.errors) return;
    console.log(this.state.values);
  };

  isValid = (input) => {
    if (input.value.trim().length === 0) {
      this.setState({ errors: { [input.name]: "This field is required" } });
    }
  };

  inputChangeHandler = (event) => {
    if (!this.isValid(event.target)) return;
    this.setState({ values: { [event.target.name]: event.target.value } });
  };

  render() {
    const { values, errors } = this.state;
    return (
      <form onSubmit={this.submitFormHandler}>
        <div>
          <input
            type="text"
            name="name"
            value={values.name}
            onChange={this.inputChangeHandler}
          />
          {errors.name && <div>{errors.name}</div>}
        </div>
      </form>
    );
  }
}
    

在实际开发应用程序时，您可能不应该从头开始处理表单；相反，可以使用其他第三方库，例如Formik或Redux-Forms。使用库将帮助您节省大量时间，并为您提供一个简单的 API 来处理表单值和验证。

如何提交表单值

通常，您会在提交处理程序中提交表单值。在上一节的示例中，可以使用submitFormHandler方法提交表单。

要将表单值发送到后端服务，您可以使用本机fetch API 或axios HTTP 库。

      import axios from "axios";

// ...
submitFormHandler = async (event) => {
  event.preventDefault();
  if (this.state.errors) return;
  const response = await axios.post(BACKEND_URL, {
    formData: this.state.values,
  });
  // do something after form submission
};
    

发送表单值是一个异步操作，因此请确保使用 Promises 或 async/await 语法来处理提交。

结论

在本指南中，您了解了 React 中的不同类型的表单以及如何管理它们。受控表单输入是首选，因为它们鼓励您使用状态来处理值。但是，作为开发人员，您的工作是选择最适合您应用用例的方法。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中使用 HTML 表单

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

class UncontrolledForm extends React.Component { constructor() { this.nameInput = React.createRef(); } submitFormHandler = (event) => { event.preventDefault(); console.log(this.nameInput.current.value); }; render() { return ( <form onSubmit={this.submitFormHandler}> <div> <input type="text" name="name" ref={this.nameInput} /> </div> </form> ); } }

class ControlledForm extends React.Component { constructor() { this.state = { values: { name: "", }, }; } submitFormHandler = (event) => { event.preventDefault(); console.log(this.state.values); }; inputChangeHandler = (event) => { this.setState({ values: { [event.target.name]: event.target.value } }); }; render() { const { values } = this.state; return ( <form onSubmit={this.submitFormHandler}> <div> <input type="text" name="name" value={values.name} onChange={this.inputChangeHandler} /> </div> </form> ); } }

class ControlledForm extends React.Component { constructor() { this.state = { values: { name: "", }, }; } submitFormHandler = (event) => { event.preventDefault(); if (this.state.errors) return; console.log(this.state.values); }; isValid = (input) => { if (input.value.trim().length === 0) { this.setState({ errors: { [input.name]: "This field is required" } }); } }; inputChangeHandler = (event) => { if (!this.isValid(event.target)) return; this.setState({ values: { [event.target.name]: event.target.value } }); }; render() { const { values, errors } = this.state; return ( <form onSubmit={this.submitFormHandler}> <div> <input type="text" name="name" value={values.name} onChange={this.inputChangeHandler} /> {errors.name && <div>{errors.name}</div>} </div> </form> ); } }

import axios from "axios"; // ... submitFormHandler = async (event) => { event.preventDefault(); if (this.state.errors) return; const response = await axios.post(BACKEND_URL, { formData: this.state.values, }); // do something after form submission };