输入元素是否应该在表单内？

Question

所以我有一个 React 组件，其目的是：用户在输入中写入一个单词，然后按 Enter 或单击链接转到该单词的定义页面。

'use client';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { useState, useRef, useEffect } from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import Link from 'next/link';

function getSearchedWord(word?: string | null) {
    return word ? decodeURIComponent(word) : '';
}

export default function WordForm() {
    const searchedWord = useSelectedLayoutSegment();
    const [word, setWord] = useState(getSearchedWord(searchedWord));
    const linkRef = useRef<HTMLAnchorElement>(null);

    useEffect(() => {
        setWord(getSearchedWord(searchedWord));
    }, [searchedWord]);

    return (
        <nav>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    linkRef.current!.click();
                }}
                className="relative mb-6 h-12"
            >
                <label htmlFor="word-input" className="block h-full">
                    <span className="sr-only">Type a Word</span>
                    <input
                        type="text"
                        value={word}
                        onChange={(e) => {
                            setWord(e.target.value);
                        }}
                        id="word-input"
                        placeholder="Type any word"
                        className="block h-full w-full rounded-lg bg-contrast-lower pl-3 pr-14 text-contrast-high placeholder:text-contrast-normal"
                    />
                </label>
                <Link
                    title='Go to word definition page'
                    ref={linkRef}
                    href={`/${word}`}
                    aria-label="Go to word definition page"
                    className="group absolute bottom-0 right-0 top-0 flex items-center px-4"
                >
                    <FontAwesomeIcon
                        icon={faArrowRight}
                        className="text-contrast-low transition-colors group-hover:text-contrast-high group-focus-visible:text-contrast-high"
                    />
                </Link>
            </form>
        </nav>
    );
}

问题是我不确定将这些控件包含在表单中是否合适。我没有向服务器提交数据，控件是整个网站的主要导航 - 顺便说一下，该应用程序只是一个使用 next.js 构建的字典应用程序。这就是我将所有内容都包含在导航元素中的原因。我只是想知道将这些控件包含在表单中是否合适。

根据 MDN Web 文档：

Web 表单是用户与网站或应用程序之间交互的主要点之一。表单允许用户输入数据，这些数据通常发送到 Web 服务器进行处理和存储（请参阅本模块后面的发送表单数据），或者在客户端使用以某种方式立即更新界面（例如，添加列表中的另一个项目，或者显示或隐藏 UI 功能）。

我不会将数据发送到网络服务器进行处理，但当用户单击链接导航到单词定义页面时，我会以某种方式更新界面。但我仍然怀疑是否应该在这里使用表格。

Answer 1

所以看起来您使用的表单只是为了提交，当用户按 Enter 时会触发导航。由于您实际上并未向服务器提交数据，因此最好仅使用表单的语义含义而不是其功能行为。

您仍然可以使用相同的导航功能来执行此操作，而无需使用表单，方法是利用链接的

onClick

事件甚至输入字段的

onKeyPress

事件来检测何时按下 Enter 键。这澄清了代码并使其更好地与预期功能保持一致。

希望有帮助:)