我在考虑对表单行为做出正确反应

我在讨论重构我正在从jQuery进行反应的部分网站。在我开始之前，我会非常感谢我的思考过程。我在考虑对表单行为做出正确反应

<DeviceChooser> 
<ManufacturerSelect /> 
<DeviceSelect /> 
<ButtonOne /> 
<ButtonTwo /> 
<DeviceChooser>

这是所需的组件。它的行为是：

父级（DeviceChooser）通过componentWillMount上的ajax获取一些json数据。
它将部分数据传递给ManufacturerSelect，它是一个选择字段。
在此处选择了某些内容后，DeviceChooser会将一些其他数据传递给DeviceSelect，它也是一个选择字段。
一旦事情是选择在那里，如果某些条件得到满足，无论是Button1的和Button2的变得活跃
点击Button1的或将Button2将页面重定向到指定的URL，通过参数设置为根据2个选择字段。

更实际地说，你选择你的手机制造商，那么在接下来的选择从制造商选择您的设备，那么你重定向到无论是第1页第2页或一些事情取决于你按下按钮参数。

我的问题是：

谁的责任，它应该是决定是否按钮应积极？ DeviceChooser或按钮？
谁应该撰写重定向网址？选配器还是按钮？
我将在整个网站上有这个DeviceChooser组件的变体，我能做些什么来确保至少有一些可重用性？需要注意的是，有时它会有更多的选择字段，只有2个，其他时间不同的选择字段将根据状态成为方程的一部分（比如，如果您的设备是笔记本电脑，还需指定设备的边缘形状）

我真的很感谢任何反馈。我还创建了一个Gist与我到目前为止，如果有帮助的代码。

来源

2016-02-19 VesterDe

自从投资React以来，我遵循的方法之一是使用containers。容器实质上是负责检索和操作数据的组件，然后将所有相关数据传递给仅负责呈现所述数据的所有儿童“哑”组件。

在这个前提下（或类似的东西）运行，我会建议在容器中对初始数据进行计算，并将所有内容都传递给下层。

所以在这种情况下，我们应该做到以下容器（或父组件）

通过componentWillMount
获取JSON数据处理数据，并把它传递给ManufacturerSelect

其他问题取决于你正在使用的框架。你能详细说明这一点吗？你使用Redux，Flux，ReFlux等？

我已经快速查看了你的代码，我认为你应该做的一件超级有用的事情是为每个组件指定PropTypes。这对于调试非常有帮助，并且当您谈论在多个不同位置重新使用组件时，这至关重要。另外（不理解完整的上下文）是否需要在组件中随处使用state？他们能够简单地渲染传递给他们的道具吗？（这又取决于你使用的商店）。

来源

2016-02-19 08:51:26 JamesWatling

我最近才开始这个冒险，我还没有实现一个商店。我已经阅读了你提到的三个中的每一个，但是我不能说我足够了解选择对我最有效的东西。你会推荐什么？我可以详细阐述一下，并说在一个页面上可能有多个DeviceChooser组件，但是它们所有数据的来源可能只是一个ajax请求。尽管这并非严格必要。 – VesterDe

我最初是从Flux开始的，然后被介绍给Redux。它简单得多，规模也非常好。传统上，Flux是国王，但现在看来，redux正在成为首选框架。我会看看这篇文章https://blog.andyet.com/2015/08/06/what-the-flux-lets-redux/ – JamesWatling

感谢您的链接和输入:) – VesterDe

这是一个相对通用的问题，但我的思想（非常坚持己见）的行会是如下：

您的按钮应该成为简单，通用按钮组件应该在这个例子中有以下道具（除或许有些造型道具）：

disabled 
title 
onClick

您的设备选配是谁拥有的组件混合在一起，这些按钮实际上应该继续做一些他们点击后意识的人，所以你要处理的知识仅在该组件内。它将其余部分粘合在一起（传递数据），因此也应该做出这些决定。

<DeviceChooser> 
    <ManufacturerSelect data={this.state.manufacturers} /> 
    <DeviceSelect data={this.state.devices} /> 
    <Button 
     disabled={this.state.selectedManufacturer === null ? true : false} 
     title='Manufactuer details' 
     onClick={this.handleManufacturerDetailsClick.bind(this, this.state.selectedManufactuer}} 
    /> 
    <Button 
     disabled={this.state.selectedDevice === null ? true : false} 
     title='See device details' 
     onClick={this.handleDeviceDetailClick.bind(this, this.state.selectedDevice }} 
    /> 
<DeviceChooser>

设备选配的方法相比，可以是这样的：

handleDeviceDetailClick(device) { 
    history.pushState('/device/detail/' + device.id); 
}

你想你的功能组件从无国籍的人分开。这是一个很好的阅读是http://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components/

来源

2016-02-19 08:53:12

感谢您的链接和输入！我试图围绕思考做出反应，希望我能做出比jQuery更好的东西。 – VesterDe

这绝对是一种不同的思考方式，也是探索的好去处。幸运的是，那里有很多文档和教程！ –

我在考虑对表单行为做出正确反应

回答

相关问题