React.js中如何获取其他组件的数值 实现SearchBox向HomeScreen传值

方案1：状态提升（适用HomeScreen是SearchBox父组件的场景） #

这是最直接的实现方式，把原本存放在SearchBox内部的keywords状态移到共同的父组件HomeScreen中维护，再通过props把状态和状态修改方法传递给SearchBox使用。

修改后的HomeScreen代码： #

import { useState } from 'react'
import SearchBox from './SearchBox'

function HomeScreen() {
  // 将keywords状态移到父组件维护
  const [keywords, setKeywords] = useState('')
  // 此处可直接使用获取到的keywords值
  console.log('搜索关键词：', keywords)

  return (
    <div>
      {/* 通过props把状态和修改方法传给子组件 */}
      <SearchBox keywords={keywords} setKeywords={setKeywords} />
      {/* 其余HomeScreen业务代码 */}
    </div>
  )
}

修改后的SearchBox代码： #

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

function SearchBox({ keywords, setKeywords }) {
  return (
    <div className="form-group has-feedback">
      <Form>
        <Form.Control
          type='text'
          name='q'
          value={keywords}
          onChange={(e) => setKeywords(e.target.value)}
          className=' ml-sm-5 mt-4 p-3 mb-1 ml-2 Form-control'
          variant="light"                
        />
        <Button 
          type='submit' 
          className='ps-5 pt-1 pb-1 mt-3 search-button' 
          variant="light"
        >
          <i className="fas fa-search" variant="info"></i>
        </Button> 
      </Form>
    </div>
  )
}

export default SearchBox

方案2：全局状态管理（适用两个组件层级相差较大的场景） #

如果两个组件不是直接父子关系，嵌套层级过深逐层传props不方便，可以选择用React内置的Context API，或者第三方状态管理工具如Zustand、Redux、Jotai来全局存储keywords，两个组件都可以直接读写这个全局状态。

内容的提问来源于stack exchange，提问作者Arjun Baidya