event.preventDefault() 在 React 中不起作用
Posted
技术标签:
【中文标题】event.preventDefault() 在 React 中不起作用【英文标题】:event.preventDefault( ) is NOT working in React 【发布时间】:2022-01-02 13:21:57 【问题描述】:无法在控制台中获取值! 我做错了什么?
下面附上React的功能组件
处理函数
import React, useState, useRef from 'react';
const SimpleInput = (props) =>
const nameInputRef = useRef();
const [enteredName, setEnteredName] = useState('');
const nameInputChangeHandler = (event) =>
setEnteredName(event.target.value);
;
const formSubmissionHandler = (event) =>
event.preventDefault();
console.log(enteredName);
const enteredName = nameInputRef.current.value;
console.log(enteredName);
;
JSX 代码
return (
<form>
<div className="form-control" onSubmit=formSubmissionHandler>
<label htmlFor="name">Your Name</label>
<input
ref=nameInputRef
type="text"
id="name"
onChange=nameInputChangeHandler
/>
</div>
<div className="form-actions">
<button>Submit</button>
</div>
</form>
);
;
export default SimpleInput;
【问题讨论】:
在form
元素上添加onSubmit=formSubmissionHandler
【参考方案1】:
formSubmissionHandler
应该位于 form
元素上,而不是 div
元素上。
return (
<form onSubmit=formSubmissionHandler>
<div className="form-control">
<label htmlFor="name">Your Name</label>
<input
ref=nameInputRef
type="text"
id="name"
onChange=nameInputChangeHandler
/>
</div>
<div className="form-actions">
<button>Submit</button>
</div>
</form>
);
【讨论】:
以上是关于event.preventDefault() 在 React 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
event.preventDefault() 在 React 中不起作用
event.preventDefault 如何在无法停止的事件处理程序上工作?
$('.classitem').submit(function(event)event.preventDefault) 不起作用