Question

我有一个名为 form 的 React 组件：

import React, { useState } from 'react';
import { useForm } from "react-hook-form";

import './Form.css';

function Form() {

  const nameChange=(e)=>{
    setName(e.target.value);
  }

  const onSubmit = (data) => {
    console.log(data);
  }

  const [nameVal, setName] = useState();

  const {register, handleSubmit} = useForm();

    return (
      <form className="my-form" onSubmit={handleSubmit(onSubmit)}>
        <p className="more-info">Want to leave a comment</p>
        <p className="more-info">or know more about me?</p>
        <input className="in" type="text" value={nameVal} placeholder="Name" {...register("name")} onChange={nameChange}/>
        <input className="in" type="text" value='' placeholder="Email" {...register("email")}/>
        <textarea placeholder="Comment" value='' cols="5" rows="10" {...register("comment")}/>
        <button>Send</button>
      </form>
    )
}

export default Form

如果我点击任何输入或文本区域，它会立即失去焦点，如果我向下滚动到关于页面的顶部。

可以在以下位置找到完整的应用程序：patgrady64.netlify.com 完整代码可以在我的github上找到：https://github.com/patrickrgrady81/my-site

如果有任何其他问题，请告诉我。提前致谢。

Answer 1

尝试使用 disableEnforceFocus。

Answer 2

正如@moonwave99 指出的：

<块引用>

在您的代码中，您将部分包装在锚标记中，例如 <a href="#About"> - 这不是有效的 HTML 行为。

我将导航更改为使用 onClick 而不是使用锚标记。这使得表单现在可以正常工作。我永远不会知道像这样使用 <a> 标签的涓滴效应。

谢谢。

React 表单在点击时立即失去焦点并滚动页面

2 个答案: