Question

我正在制作一个反应应用程序，显示您搜索的宠物小精灵的详细信息。所以我有一个Home组件，它有一个输入字段+提交按钮。我想在我的主要组件中呈现我的api调用。

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

我需要这个值来更新我的主要组件中的口袋妖怪名称状态，以获取我的提取调用的口袋妖怪名称。

我需要将此值存储在我的'searchValue'状态中。 Main component details

任何提示？

Answer 1

使用ref in reactjs可以实现此目的的一种方法，在主要组件内部，您需要提供参考，例如：

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的更多信息

Answer 2

我建议你看一下redux这是国家管理的好工具。 Redux将确保您拥有单一的事实来源。

你需要做的是创建一个Action，它会调度一个事件来更新状态，Reducer会更新状态（{{1}中搜索键的值}）。您的redux-store组件将读取API中的数据（相同Main - Action方式）＆amp;渲染它而不必担心当前的状态。如果您对此感兴趣，我可以详细解释整个架构。这种架构将减少错误和清晰的信息流，包括组件之间的共享状态。

我知道这听起来有点过于复杂，但如果您的应用程序正在增长，那么值得一试。

很少有建议：您的主要组件有太多的逻辑。组件应具有尽可能少的逻辑，因此它们更具确定性。另请阅读React Stateless functional components

如果您想采用Reducer路径

，请参阅以下链接

如何将我的函数中的值传递给另一个文件中的另一个组件

2 个答案: