Question

我的应用场景使用了一个容器组件，该容器组件称为演示组件。

我可以在容器组件内创建右上按钮，如下所示：

static right = () => {
  return (
    <TouchableOpacity onPress={() => buttonPressed()}>
      <Text style={styles.rightButtonText}>Done</Text>
    </TouchableOpacity>
  );
};

现在，我试图使呈现组件识别右上角的按钮单击（以便它可以保存数据）。

我可以通过将功能作为道具从容器组件发送到表示组件来在两者之间进行通信。当从表示组件中调用它时，它在容器组件中被调用。

但是我发现没有办法使容器组件中的static right功能听到演示组件中的单击（然后采取适当的措施）。

我尝试了these two solutions以及其他几个命令（包括Action.refresh），但是没有任何效果。我曾考虑过使用状态，但是如果我使用静态函数，则无法访问state或this.。但是删除static会使按钮完全消失。

在此先感谢您的帮助。

Answer 1

过去我也遇到过类似的挑战。我解决的方法如下（直接从代码库中提取（主要是））。请注意，它们是与您提供的示例相似的方法，但这也许对您有意义。

•容器组件

具有处理业务逻辑的updateAccount函数。它作为prop传递到表示组件中。

•演示组件

突出显示组件中的2项特定功能：

handleChange

更改文本输入时，将触发此功能，并以状态更新来自输入的数据
调用此函数时，我们知道表单已更改，因此我们想在（react-native-router-flux）导航栏中显示一个“保存”按钮（点击该按钮应触发容器的updateAccount）。所以我们称toggleSaveButton：
```
handleChange = (name, val) => {
    this.setState({ [name]: val, formChanged: true }, this.toggleSaveButton);
}
```

toggleSaveButton

如果this.state.formChanged为true，则表单已更改，因此请添加保存按钮供用户点击，否则将其隐藏（例如，我可能会在表单提交成功时隐藏）

toggleSaveButton = () => {
  const config = this.state.formChanged
    ? { rightTitle: 'Save', onRight: () => this.props.updateAccount(this.state) }
    : { rightTitle: '', onRight: () => {} };

  Actions.refresh(config);
};

使用响应本机路由器流量

1 个答案: