javascript - 如何在React中获取表单提交的输入值

Question

我是 React 新手，一直在尝试制作注册表单，但我找不到在单击按钮 (onClick) 时从输入中获取数据的方法

function App() {

  const userData = []

  function handleClick() {
    //get input data here
  }

  return (
    <div className="form-main">
      <div className='em'>
        <label className='label '> User e-mail </label>
        <Input type="email" />
      </div>
      <div className='pw'>
        <label className='label '> Password </label>
        <Input type="password" />
      </div>

      <button type="submit" className="submit-btn" onClick={handleClick}>Signup</button>
      
    </div>
  );
}

我在下面分享了我的输入组件，以防有帮助(我在发布时缩短了代码)

function Input(props) {
    return (
        <input type={props.type} className="input"></input>
    );
}

Answer 1

您的表单输入不受控制 - https://reactjs.org/docs/forms.html#controlled-components

React 未注册输入值的更新。一个快速精简的工作版本，让您了解它是如何工作的:

const Form = () => {
   const [email, setEmail] = useState('');

   const handleSubmit = (event) => {
       event.preventDefault();
       // ... do something with email
   }

   return (
      <form onSubmit={handleSubmit}>
         <input type='email' value={email} onChange={(e) => { setEmail(e.target.value) }} />
         <button type='submit'>Submit</button>
      </form>
   );
}

通过这种方式，React 可以“控制”输入，您可以使用 handleSubmit() 函数中的 email 值执行任何操作。