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) 不起作用

阻止默认事件event.preventDefault();

jQuery事件--- event.preventDefault() 取消点击动作的默认导航行为

Javascript event.preventDefault() 不适用于模态