react如何获取表单

获取表单数据的方法

在React中获取表单数据有多种方式，以下是常见的几种方法：

受控组件方式 通过将表单元素的值与React组件的state绑定，实现数据的双向绑定。每当表单元素的值发生变化时，更新对应的state值。

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

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

  handleSubmit = (event) => {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

非受控组件方式 使用ref直接访问DOM元素获取表单值，适合简单表单或需要直接操作DOM的场景。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    alert('提交的名字: ' + this.inputRef.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" ref={this.inputRef} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

使用FormData API 对于包含多个输入项的表单，可以使用FormData对象一次性收集所有表单数据。

function MyForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" type="text" />
      <input name="password" type="password" />
      <button type="submit">提交</button>
    </form>
  );
}

使用第三方表单库 对于复杂表单需求，可以使用专门的表单库如Formik或React Hook Form，它们提供了更强大的表单处理能力。

import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">提交</button>
    </form>
  );
}

选择哪种方法取决于项目需求和复杂度。受控组件提供更好的控制但代码量稍多，非受控组件更简单但控制力较弱，第三方库则适合复杂表单场景。