时间戳

首页 > 解决方案 > 如何获取输入字段的值并在 React 的 URL 中使用它

reactjs - 如何获取输入字段的值并在 React 的 URL 中使用它

问题描述

我必须完成这个项目，我很难理解这些钩子是如何工作的。我对 React 完全陌生，我想知道如何获取我的 Input 字段的值，以便我可以使用它并修改我正在使用的 API (omdb) 的 URL。（见 ${inputValue} ）

这是代码：

function App() {
  const [searchResult, setSearchResult] = useState()


  useEffect(() => {
    const search = async () => {


      const response = await fetch(
        `http://www.omdbapi.com/?apikey=aaaaaa&s=${inputValue}`,
      )

      const data = await response.json()
      console.log(data);

      if (!searchResult) {
        setSearchResult(data);

      }
    }

    search()
  })

  return (
    <div className="App">
      <div className="search">
        <input type="text" placeholder="Search..." />
        <button>Search</button>
      </div>
      {!searchResult ? (
        <p>No results yet</p>
      ) : (
          <div className="search-results">
            <div className="chevron">
              <ChevronLeft />
            </div>
            <div className="search-results-list">
              {searchResult.Search.map(result => (
                <div key={result.imdbID} className="search-item">
                  <img
                    src={result.Poster === 'N/A' ? placeholderImg : result.Poster}
                    alt="poster"
                  />
                  <div className="search-item-data">
                    <div className="title">{result.Title}</div>
                    <div className="meta">{`${result.Type} | ${result.Year}`}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="chevron">
              <ChevronRight />
            </div>
          </div>
        )}
    </div>
  )
}

起初看起来很简单，我以为我可以查询选择输入标签的值，但由于某种原因不起作用。我一直在四处寻找，但似乎没有任何效果，而且我尝试过的方法返回“未定义”。

谢谢您的帮助！！

标签： reactjsinputreact-hooksomdbapi

解决方案

您可以将 inputValue 定义为状态：

  const [inputValue, setInputValue] = useState("");

给 inputValue 赋值，onChange 回调需要给 inputValue 赋值：

      <input
        type="text"
        value={inputValue}
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
      />

最小工作示例：https ://codesandbox.io/s/stoic-bell-j3e2p?file=/src/App.js:180-328

推荐阅读