在React中处理表单输入

能者

在React中处理表单输入有几种常用的方法:

1. 受控组件（Controlled Components）:使用受控组件，将表单的值存储在组件的state中，并通过onChange事件来更新state。例如，可以在input元素上设置value属性为state中保存的值，并在onChange事件中更新state。
[mw_shl_code=javascript,true]
import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
    console.log(name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}
[/mw_shl_code]

2. 非受控组件（Uncontrolled Components）:使用非受控组件，不需要将表单的值存储在组件的state中。可以通过ref来获取表单的值。
[mw_shl_code=javascript,true]
import React, { useRef } from 'react';

function MyForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    // 获取表单的值
    console.log(inputRef.current.value);
    // 处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">提交</button>
    </form>
  );
}
[/mw_shl_code]

无论你选择哪种方式，都可以根据具体需求来处理表单输入，并进行相应的验证和提交操作。