react怎么获取表单数据-开发者知识库平台

react怎么获取表单数据

React

1485

2023/11/21 3:31:36

栏目: 编程语言

在React中获取表单数据有几种方式：

使用受控组件：通过将input元素的值与state中的状态值绑定，当用户输入时，state中的值也会更新。然后可以通过state中的值来获取表单数据。

import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

使用非受控组件：通过使用ref来获取input元素的值。

import React, { useRef } from 'react';

function Form() {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value, emailRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} />
      <input type="email" ref={emailRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

上面的例子中，nameRef和emailRef分别引用了input元素，调用nameRef.current.value和emailRef.current.value就可以获取到对应的input值。

这两种方式都可以获取表单数据，具体使用哪种方式要根据实际情况和个人喜好来决定。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

react怎么获取表单数据

最新知识库

相关标签