跨组件共享钩子

Question

我正在尝试了解如何跨组件共享挂钩状态。但它似乎没有共享。我是不是做错了什么？

Home.js

export default function Home() {
    
    const [search, setSearch]= useState('');
    
    
    return (
        <div>
            <Input search={search} handleChange={setSearch}  />
            <Products search={search} handleChange={setSearch} />
        </div>
    )
}

Input.js

export default function Input({search, setSearch}) {
  
    

  const handleChange = (e) => {
      setSearch(e.target.value)
  }
  
    return (
    <div className='App'>

    <input 
    placeholder='search...' 
    value={search}
    onChange={handleChange}
    />


{search}
   

    </div>
  )
}

实例：

const { useState } = React;

/*export default*/ function Home() {
    
    const [search, setSearch]= useState('');
    
    
    return (
        <div>
            <Input search={search} handleChange={setSearch}  />
            <Products search={search} handleChange={setSearch} />
        </div>
    )
}

/*export default*/ function Input({search, setSearch}) {
  
    

  const handleChange = (e) => {
      setSearch(e.target.value)
  }
  
    return (
    <div className='App'>

    <input 
    placeholder='search...' 
    value={search}
    onChange={handleChange}
    />


{search}
   

    </div>
  )
}

const Products = ({search}) => {
    return <div>Product: {search}</div>;
};

ReactDOM.createRoot(document.getElementById("root"))
.render(<Home />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>

Answer 1

您在 Home 组件中将 handleSearch 作为 prop 传递，但 Input 期望 setSearch，因此只需更改 Home[= 中的这一行16=]

return (
  <div>
    <Input search={search} setSearch={setSearch}  />  // change here
    <Products search={search} handleChange={setSearch} />
  </div>
)

跨组件共享钩子

share hooks across components

reactjs

react-hooks