Javascript 如何将值从函数传递到另一个文件中的另一个组件

我正在制作一个react应用程序，显示您搜索的口袋妖怪的详细信息。所以我有一个主页组件，它有一个输入字段+提交按钮。 我想在主组件中呈现api调用

我的问题是：当我输入submit时，如何将位于我的主组件中的输入字段的值传递给我的主组件

我需要这个值来更新我的主组件中的pokemon name状态，以便为我的fetch调用获取pokemon名称

我需要将此值存储在我的“searchValue”状态中。

---

有什么提示吗？

在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 });
}

现在在主组件中，您需要在输入之前引用方法组件，如（您可以相应地修改它）

---

您可以在

上阅读更多关于Ref和DOM的信息，我建议您看看哪个是状态管理的好工具

Redux

将确保您拥有唯一的真相来源

您需要做的是创建一个将发送事件以更新状态的，一个将更新状态的（在

redux存储中搜索键的值）。您的
Main
组件将从API中读取数据（相同的
Action
-
Reducer
方式）&渲染它而不必担心当前状态。如果你更感兴趣，我可以详细解释整个架构。这种架构将有更少的bug和清晰的信息流，包括组件之间的共享状态

我知道这听起来有点太复杂了，但如果你的应用程序在增长，那么值得一试

几点建议：
您的主要组件有太多的逻辑。组件应该具有尽可能少的逻辑，以便更具确定性。请同时阅读

如果您希望使用
redux
path，这里有一些链接




尝试重新思考组件层次结构，并思考状态应存储在何处以及数据如何流动。输入可以被视为无状态，并接受onChange和onSubmit作为道具。谢谢您的回答！你说他逻辑性太强是什么意思？我可以用更少的代码编写相同的组件吗？是的，组件必须足够笨，可以只呈现来自状态的值&没有那么多逻辑。从API读取搜索数据，更新redux存储，使用
选择器动态修改它，以满足组件的需要。
import Home from './Home'

<Home onRef={ref => (this.home = ref)} />
<Form onSubmit={e => { this.onSubmit(e) }}

onSubmit = values => {
    this.home.method(values);
}