Question

我正在研究搜索栏上的反应，在另一个文件中它会调用unsplash-api，我有一个搜索栏组件，正在考虑在主文件中进行api调用，或者在src文件夹中的其他文件中建议其他明智的选择

到目前为止，我已经设置了一个组件并设置了初始挂钩，但是我不知道如何前进

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"/>

Answer 2

根据我的理解，您应该能够通过这些方法将Hooks中的状态（从搜索栏）传递给父组件。

使用Redux并创建具有所需状态的全局存储变量。然后，您需要从搜索组件中更新状态变量在Redux存储中，然后将该状态变量加载到父组件。
从父组件创建状态变量并获取它传递给搜索组件作为道具。然后从搜索组件，您将更新此道具。

我不是100％肯定方法2是否会按预期工作，但我很确定方法1是否会工作。

我如何访问另一个js文件中的React Hook中完成的状态值

2 个答案: