如何过滤将在表单中提交的内容

Question

情境化

我正在使用 ReactJS 创建一个小表单，该表单会根据用户类型重定向到新站点（例如 google）。它是这样工作的：如果用户输入“!y fried potato”，代码必须重定向到显示所有“fried potato”视频的 youtube 搜索页面，但如果用户在输入中只输入“fried potato”，代码必须打开 Google，其中包含“炸土豆”的所有结果。换句话说，程序必须识别文本中是否有“键”并打开不同的选项卡。

好的。侦听输入并设置正确站点的逻辑代码正在运行，但想法是：如何过滤将发送到提交表单的内容？因为当用户直接输入“!y fried potato”时，youtube 页面上的搜索内容将是“!y fried potato”而不仅仅是“fried potato”（没有密钥）。在发送表单内容之前有什么方法可以删除密钥？

上面的代码是处理这个功能的组件：

export const SearchInput: React.FC = () => {

  //searchPath => state containing the correct path to the site
  //value => state containing the inputted value
  //form => form reference to call the submitted method
  const [searchPath, setSearchPath] = React.useState<string>();
  const [value, setValue] = React.useState<string>("")
  const form = React.createRef<HTMLFormElement>();

  //handle whit the input
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // SearchOptions.searchOn() handle with the input and return the searched content and the path
    // search => constant containing the input value without the key
    // link => const containing the correct path to the site
    const { search, link } = SearchOptions.searchOn(event.currentTarget.value);
    setSearchPath(link);
    setValue(search);
  };

  // Call the submit method
  const handleSubmit = (event: any) => {
    event.preventDefault();
    event.stopPropagation();
    form.current?.submit();
  };

  return (
    <form
      ref={form}
      className="input-container"
      method="get"
      onSubmit={handleSubmit}
      action={searchPath ?? "http://google.com.br/search"}
    >
      <input type="hidden" name="sitesearch" value="" />
      <input
        type="search"
        name="q"
        className="search-input"
        placeholder="Search on Google"
        onChange={handleChange}
      />
      <button id="search" name="confirm" type="submit" onClick={handleSubmit}>
        Search
      </button>
    </form>
  );
};

基本上，每次用户键入并调用函数 SearchOptions.searchOn(event.currentTarget.value) 时都会调用函数 handleChange。 searchOn 将 return 不带键的输入值和正确的 link。例如，如果用户键入“!y fried potato”，则 return 将是 {link: "https://www.youtube.com/results?search_query=fried potato", search: "fried potato"}。提交表单时，prop action路径正确，但内容仍然是“!y fried potato”，这是真正的输入值。

同样，问题是：有什么方法可以在提交前更改表单值吗？。我试图将输入的值保存在一个状态中，并将该状态传递给隐藏输入中的 value 道具，但这行不通。我真的不知道提交功能是如何工作的。

Answer 1

通常，您根本不会依赖本机 HTML 表单的 submit 行为。 event.preventDefault() 的目的就是做到这一点。相反，只需直接在处理程序中执行您想要的任何逻辑。例如

import { useState } from 'react'

const Search = () => {
  const [inputValue, setInputValue] = useState('')

  const handleChange = (event) => {
    setInputValue(event.target.value)
  }

  const handleSubmit = (event) => {
    event.preventDefault()
    const [type, searchTerm] = inputValue.split(/\s+/, 2)
    const encoded = encodeURIComponent(searchTerm)

    if (type === '!y') {
      window.location = `https://www.youtube.com/results?search_query=${encoded}`
    } else if (type === '!g') {
      window.location = `http://www.google.com/search?q=${encoded}`
    } // ... etc
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={inputValue} onChange={handleChange} />
      <button type="submit">Search</button>
    </form>
  )
}

如何过滤将在表单中提交的内容

How to filter what will be submitted in a Form

html

reactjs

typescript

forms

submit