Question

所以我正在为一个网站创建一个用户搜索功能，但是每当我在 React 中传递一个反引号时它都会返回 undefined 我尝试将它转换为一个字符串，没有任何变化。

import React, { useRef } from'react';
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'

function SearchBox() {
  const searchRef = useRef('');
  var query = `search/${searchRef.current.value}`;
  return (
    <form className="searchContainer" method="post">
      <h1>WAFFLES :D</h1>
      <div className="searchBox">
        <input ref={searchRef} type="text"/>
        <Link className="searchGlass" to={query}><FontAwesomeIcon icon={faSearch}/></Link>
      </div>
    </form>
  );
}

export default SearchBox;

Answer 1

ref 将被更新为 HTMLInputElement，但看起来您的意图是让输入的 value 在它更改时更新 ref。

您需要使用useState以便在值更改时重新渲染； useRef 不会根据需要重新渲染和更新 to={query}

function SearchBox() {
  const [query, setQuery] = useState('');
  const linkTo = `search/${query}`;

  function handleChange(event) {
    setQuery(event.target.value);
  }

  return (
    <form className="searchContainer" method="post">
      <h1>WAFFLES :D</h1>
      <div className="searchBox">
        <input onChange={handleChange} type="text" value={query} />
        <Link className="searchGlass" to={linkTo}>
          <FontAwesomeIcon icon={faSearch} />
        </Link>
      </div>
    </form>
  );
}

Answer 2

您可以像这样处理 onSubmit 中的输入：

const handleSubmit = e => {
    e.preventDefault()
    console.log('SUBMIT', `/search/${searchRef.current.value}`)
}

或者在 useEffect 中，如果您尝试监听输入变化：

const handleChange = e => {
    const query = `/search/${e.target.value}`
    console.log(query)
}

useEffect(() => {
    searchRef.current.addEventListener('input', handleChange)
    return () => searchRef.current.searchRef('input', handleChange)
})

否则，我会推荐@Rose 的答案。

为什么反引号在 React 中返回 undefined

2 个答案: