在React中处理表单输入

能者

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

1. 受控组件（Controlled Components）:使用受控组件，将表单的值存储在组件的state中，并通过onChange事件来更新state。例如，可以在input元素上设置value属性为state中保存的值，并在onChange事件中更新state。

[JavaScript] 纯文本查看 复制代码

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> 
  ); 
} 

2. 非受控组件（Uncontrolled Components）:使用非受控组件，不需要将表单的值存储在组件的state中。可以通过ref来获取表单的值。

[JavaScript] 纯文本查看 复制代码

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> 
  ); 
} 

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