存储状态的位置使React组件更具可重用性

Question

我有一个自动完成组件，其中包含以下道具：

• value（显示文字），
• onChange（每次击键都会被解雇）
• onSelect（当用户从​​列表中选择内容时触发 建议，传递所选对象+显示所选对象的文本 - 与value）
相同

状态：   - suggestionsList（我已经确定它是一个州，因为它是该组件内部的东西）。

在其中一个视图中，此组件的父视图在每次击键后都不关心value。它只关心onSelect处理程序传递的选定项目。所以在这种情况下value＆amp;不需要onChange道具。 value可能会成为自动填充组件的内部状态。

但是在其他一个观点中，父母也希望了解每次击键。这意味着父母需要将value保持在他的状态，并将其作为道具传递。还需要onChange道具来通知父母改变其状态。

如何构建自动完成组件以便它处理这两种情况？哪些属性应该是道具？哪些属性？

任何建议表示赞赏。

Answer 1

在第二种情况下，如果父母需要知道当前value，则不需要保留变量，所以我想如果你传递当前value（来自内部状态变量）作为onChange prop函数的参数，父节点会注意到更改并相应地更新。

另一种方法是使用value属性和内部状态变量。我的意思是：如果父母希望控制value它将有一个状态条目，并将负责更新它，在其他情况下，不能提供value属性，因为它会结束为常数。您的组件将在每次提供时使用此属性作为当前值，并且父级应使用onChange来更新它所拥有的va;

您可以在material-ui中查看自动完成组件的源代码。