使用React

Question

我第一次开始反应，但我遇到了一些特殊要求的困难。我有以下组件结构：

调查
--QuickTextOptions
---- QuickTextOption
--Question
----答案
------ TextAnswer

你可能会说，我正在研究一个调查应用程序。调查作者会创建一个问题，然后回答（即子问题或选项）。将有许多不同的答案类型，包括复选框和文本。

在调查的最上方，问题上方还有一个“快速文本”选项列表。选择其中一个时，某些文本将附加到相应TextAnswer输入字段的值字段。用户可以根据需要选择尽可能多的这些。

这对于javascript来说是微不足道的，但我无法找到一个很好的方法来使用React，而不会在调查链中添加refs组件。

如果我将其作为道具传递，请将AnswerText作为受控组件，并设置value = {this.state.value + this.props.quickText}。它只是在AnswerText的handleChange事件上重新插入文本。

我正在考虑使用refs并调用来自父母的子函数，但是refs似乎不鼓励我将不得不为Question，Answer和AnswerText执行此操作，以便将它传递给看起来有点过多的链

是否还有其他方法可以通过某些数据向链接中的后代发送事件？这是一次性添加，所以道具似乎不适合这个。

Answer 1

您使用的是 FLUX 和全局状态吗？在我的实践中，通常你构建这样的应用程序在全局状态下工作，存储你的输入数据。这样，您可以根据动作事件从不同的位置透明地编辑它（唯一可以修改输入值的输入，输入本身不会这样做）。

所以我看到它应该是这样的：

1. 将对全局状态对象的引用深入传递到组件和表单的输入中。
2. 当您开始键入每个新字符时触发事件以修改此输入的全局状态值。您可以在组件的道具和组件中立即获得更新值，从而呈现新输入的角色。
3. 如果要修改其他组件的输入（通过按下按钮），您的操作几乎相同。单击按钮，它会触发事件，说明该输入的全局状态值应添加“some string”。您的输入组件会收到带有新道具的回调并立即呈现此文本。

通过说事件我的意思是获得一些价值并将其插入全球状态的特殊事件。休息是通过框架完成的。

希望这有助于您设计自己的应用。我上面描述的方法是对Tictail Talk网络聊天客户端如何工作的简短描述。