表单

大约 4 分钟

表单

React 的 form 组件是一个常用的表单元素，用于处理用户输入。它支持多种事件和属性，帮助开发者创建交互性强的表单。

使用 form 组件

基本使用：

import React from 'react';

function MyForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

在这个例子中，handleSubmit 函数会在用户提交表单时被调用。event.preventDefault() 用于阻止默认的表单提交行为。

表单事件

onSubmit 事件

当表单提交时触发，可以用来处理表单数据。

onChange 事件

当表单元素的值发生变化时触发，可以用来实时更新表单数据。

onBlur 事件

当表单元素失去焦点时触发，可以用来验证表单数据。

onFocus 事件

当表单元素获得焦点时触发，可以用来显示帮助信息。

受控组件和非受控组件

受控组件

受控组件是指表单元素的值由 React 组件的状态管理，通常通过 useState 或 this.state 控制，由 onChange 事件更新状态。

基本示例

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default ControlledForm;

在这个例子中，name 的值由 useState 管理并绑定到 input 元素的 value 属性上，当 input 元素的值发生变化时，handleChange 函数会被调用，更新 name 的值。

对用户输入值进行限制

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    const value = event.target.value;
    if (value.length <= 10) {
      setName(value);
    }
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default ControlledForm;

在这个例子中，handleChange 函数会检查用户输入的值是否超过 10 个字符，如果超过则不更新 name 的值。

文本域

import React, { useState } from 'react';

function ControlledForm() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  }

  return (
    <form>
      <label>
        Text:
        <textarea value={text} onChange={handleChange} />
      </label>
    </form>
  );
}

export default ControlledForm;

在这个例子中，textarea 元素的值由 text 状态管理，handleChange 函数会在 textarea 元素的值发生变化时被调用，更新 text 的值。

复选框

import React, { useState } from 'react';

function ControlledForm() {
  const [checked, setChecked] = useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  }

  return (
    <form>
      <label>
        Check me:
        <input type="checkbox" checked={checked} onChange={handleChange} />
      </label>
    </form>
  );
}

export default ControlledForm;

在这个例子中，checkbox 元素的值由 checked 状态管理，handleChange 函数会在 checkbox 元素的值发生变化时被调用，更新 checked 的值。

单选按钮

import React, { useState } from 'react';

function ControlledForm() {
  const [gender, setGender] = useState('');

  const handleChange = (event) => {
    setGender(event.target.value);
  }

  return (
    <form>
      <label>
        Gender:
        <input type="radio" value="male" checked={gender === 'male'} onChange={handleChange} />
        Male
      </label>
      <label>
        <input type="radio" value="female" checked={gender === 'female'} onChange={handleChange} />
        Female
      </label>
    </form>
  );
}

export default ControlledForm;

在这个例子中，radio 元素的值由 gender 状态管理，handleChange 函数会在 radio 元素的值发生变化时被调用，更新 gender 的值。

下拉列表

import React, { useState } from 'react';

function ControlledForm() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  }

  return (
    <form>
      <label>
        Select an option:
        <select value={selectedOption} onChange={handleChange}>
          <option value="">--Please choose an option--</option>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
      </label>
    </form>
  );
}

export default ControlledForm;

在这个例子中，select 元素的值由 selectedOption 状态管理，handleChange 函数会在 select 元素的值发生变化时被调用，更新 selectedOption 的值。

非受控组件

非受控组件是指表单元素的值由 DOM 元素管理，通常通过 ref 获取表单元素的值。

基本示例

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameInputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(nameInputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameInputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

在这个例子中，nameInputRef 通过 useRef 获取 input 元素的引用，在 handleSubmit 函数中通过 nameInputRef.current.value 获取 input 元素的值。

非受控组件的默认值

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameInputRef = useRef('John Doe');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(nameInputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" defaultValue={nameInputRef.current.value} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

文件上传

import React, { useRef } from 'react';

function UncontrolledForm() {
  const fileInputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    const file = fileInputRef.current.files[0];
    alert(file.name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload a file:
        <input type="file" ref={fileInputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

在这个例子中，fileInputRef 通过 useRef 获取 input 元素的引用，在 handleSubmit 函数中通过 fileInputRef.current.files[0] 获取上传的文件。

受控组件与非受控组件的选择

如果表单元素的值需要实时更新，或者需要与其他组件的状态同步，使用受控组件。
如果表单元素的值不需要实时更新，或者不需要与其他组件的状态同步，使用非受控组件。