javascript - 如何访问在另一个 js 文件中的 react Hook 中完成的状态值

Question

我正在研究 React 中的搜索栏，在另一个文件中将调用 unsplash-api，我有一个搜索栏组件，我正在考虑在主文件中进行 api 调用，或者如果建议在 src 文件夹中的另一个文件中调用

到目前为止，我已经设置了一个组件并设置了初始 Hook ，但我不知道如何继续

import React, { useState } from 'react';
import './SearchBar.css';

const SearchBar = () => {
  const [search, setSearch] = useState('');
  return (
    <form>
      <input className="Search" placeholder="Search Images" />
      <button type="submit" id="submit" className="search-button">
        <i className="icon">search</i>
      </button>
    </form>
  );
};
export default SearchBar;

Answer 1

看看这是否是您要找的。我将 form 替换为 div 以避免代码段中的提交行为。但逻辑是一样的。您需要对提交事件执行 event.preventDefault。

function mockSearchAPI(searchValue) {
  return new Promise((resolve,reject) => {
    setTimeout(() => resolve('Search results for: ' + searchValue), 2000);
  });
}

function App() {

  const [searchResults,setSearchResults] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  function doSearch(searchValue) {
    setLoading(true);
    mockSearchAPI(searchValue)
    .then((results) => {
      setSearchResults(results);
      setLoading(false);
     });
  }


  return(
    <React.Fragment>
      <SearchBar
        doSearch={doSearch}
      />
      {loading &&
        <div>Loading...</div>
      }
      {searchResults && 
        <div>{searchResults}</div>
      }
    </React.Fragment>
  );
}

const SearchBar = (props) => {
  const [search, setSearch] = React.useState('');
  
  function onClick() {
    console.log(search);
    props.doSearch(search);
  }
  
  return (
    <div>
      <input 
        //className="Search" 
        placeholder="Search Images" 
        onChange={(event)=>setSearch(event.target.value)}
      />
      <button 
        //type="submit"
        //id="submit"
        //className="search-button"
        onClick={onClick}
      >
        <i className="icon">search</i>
      </button>
    </div>
  );
};

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>