如何在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值做任何您喜欢的事情。

Answer 2

您可以使用useRef在这里。只需调用handlessubmit当点击提交按钮时，如下图所示。

const Form = () => {
const emailRef = React.useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
// ... make use of your email data entered inside input 
console.log(emailRef.current.value) // consoles the email
}
return (
<form onSubmit={handleSubmit}>
<input type='email' ref={emailRef} />
<button type='submit' onClick={handleSubmit}>Submit</button>
</form>
);
}

你可以在这里获得更清晰的useRef官方文档