我正在制作一个反应应用程序，显示有关您搜索的口袋妖怪的详细信息。所以我有一个 Home 组件，它有一个输入字段 + 提交按钮。 我想在我的 Main 组件中呈现我的 api 调用。
我的问题是：当我输入提交时，如何将位于我的主组件中的这个输入字段的值传递给我的主组件？
我需要这个值来更新我的 Main 组件中的 pokemon 名称状态，以便为我的 fetch 调用获取 pokemon 名称。
我需要将此值存储在我的“searchValue”状态中。 Main component details
有什么建议吗？
【问题讨论】：
标签： javascript reactjs
您可以通过在 reactjs 中使用 ref 来实现此目的的一种方法，在您的主组件中，您需要进行引用，例如：
componentDidMount() {
this.props.onRef(this);
}
// Delete the reference once component is unmounted
componentWillUnmount() {
this.props.onRef(undefined);
}
然后创建一个方法，它将接收来自Home 组件的值，然后是setState，例如：
method(values) {
this.setState({ searchValue: values });
}
现在在您的 Home 组件中，您需要在输入之前引用方法组件，例如，（您可以相应地修改它）
import Home from './Home'
<Home onRef={ref => (this.home = ref)} />
<Form onSubmit={e => { this.onSubmit(e) }}
确保在主组件中添加onSubmit 方法，该方法会将值发送到Home 组件
onSubmit = values => {
this.home.method(values);
}
您可以在 React Documentation 上阅读有关 Ref 和 DOM 的更多信息
【讨论】：
我建议你看看redux，这是一个很好的状态管理工具。 Redux 将确保您拥有单一的事实来源。
您需要做的是创建一个Action，它会分派一个事件来更新状态，一个Reducer 会更新状态（redux-store 中的搜索键值）。您的 Main 组件将从 API 读取数据（相同的 Action-Reducer 方式）并渲染它，而不必担心当前状态。如果您更感兴趣，我可以详细解释整个架构。这种架构将有更少的错误和清晰的信息流，包括组件之间的共享状态。
我知道这听起来有点过于复杂，但如果您的应用程序正在增长，那么值得一试。
几点建议： 您的主要组件有太多的逻辑。组件应该具有尽可能少的逻辑，以便它们更具确定性。另请阅读React Stateless functional components
如果你想走redux路径，这里有一些链接
【讨论】：
selector 即时修改它以满足组件的需求。