使用无状态组件实现表单输入验证的正确方法是什么

时间:2016-09-19 10:41:01

标签: javascript reactjs react-native redux

所以我最近开始使用react-native,我显然希望使用最佳实践来处理我的应用程序。这就是为什么我决定使用redux并遵循建议来编写无状态的功能组件。

一旦我习惯了它并建立了一些标准,它在一段时间内效果很好:我编写了一个功能组件,将状态和调度映射到它的道具,并有一个商店跟踪事物是如何被{{{ 1}}。

一旦我对表单输入组件进行验证,事情变得复杂了。假设我想要一个可以验证其输入并在出现问题时显示错误的组件。显然我可以为我的全局商店添加一些状态,但我不想在我的全局商店中为我在我的应用程序中使用的每个输入添加一个位置。这可能与使用redux的教学形成对比,但我有一种感觉,我想要的并不是那么不切实际。

所以举一个我想要的例子:

Provider

但我不想将错误连接到全局状态。

请问这个问题太多了,或者我忽略了让const Input = ({ error }) => { let style = styles.input; const onChange = (val) => { // change the error here, say if(val === 'test') error = null; else error = 'must be test'; }; if (error) { style = styles.inputError; } return ( <TextInput style={style} onChangeText={onChange} /> ); }; 刷新自己的方式(我根本无法得到Input)?

我认为这是一个更为哲学的问题,因为有一个明显的解决方案,即为您的组件创建ES6类并使用this。我最感兴趣的是听到解决这个问题的一些方法,如果有问题,或者我只是太顽固了。 :)

1 个答案:

答案 0 :(得分:1)

好的,我提到这几乎是一个元问题,但对我而言是一个重要的问题,因为我在摆弄它时学到了很多东西。

希望我所学到的知识可以帮助遇到同样问题的人,并节省他用如此少的在线资源研究这个主题所需的时间:

  1. 你不能也许不应该能够从里面访问你的纯控件。
  2. 如果您必须将控件创建为ES6类并访问this,即使您的linter也不会再抱怨,因为这是一个很好的用例,所以有几种情况可以扩展{ {1}}。
  3. 使用这两个结论的控件示例如下所示:

    Component

    现在,由于我很顽固,我还学到了另一件事:可以用纯粹的组件制作它。就像我在某处的评论中所述,可以创建一个本地存储,将您的组件包装在class Input extends Component { render() { let style = styles.input; const error = this.state && this.state.error; const onChange = (val) => { if (val === 'test') this.setState({ error: null }); else this.setState({ error: 'test required' }); }; if (error) { style = styles.inputError; } return ( <TextInput style={style} onChangeText={onChange} /> ); } } 中并以与使用功能组件时相同的方式连接到它。我不确定它会有多大用处,但我会提供一个例子:

    Provider

    我仍然希望了解有关这些的其他方法和评论。感谢。