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

所以我最近开始使用react-native，我显然希望使用最佳实践来处理我的应用程序。这就是为什么我决定使用redux并按照建议编写无状态的功能组件。什么是无状态组件实现表单输入验证的正确方法

一旦我习惯了它，并建立了一些标准，它运行良好一段时间：我写了一个功能组件，地图状态和派遣到它的道具，并有一个商店，保持跟踪事物是如何被注入Provider 。

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

所以给我想要的东西例如：

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刷新自己的方式（我根本拿不到this）？

我知道这是一个更为哲学的问题，因为有一个为组件创建ES6类并使用setState的明显解决方案。我最感兴趣的是听到解决这个问题的一些方法，如果有问题，或者我只是过于固执。 :)

来源

2016-09-19 Dejan Maksimovic

正在使用父母非功能组件中的反应状态解决方案吗？否则，如果要控制输入，则不应使用功能组件。 – FurkanO

我没有非功能组件。如果我想控制我的输入，是否有我不应该使用功能组件的原因？如果我想要父母设置我的组件输入，该怎么办？有没有办法做到这一点，同时保持父母功能？ –

1。保持你的Redux状态，2。具有反应状态和onChange处理程序的非功能组件，3。仅在提交时验证输入，而不是像onChange = {myHandler} – FurkanO

好的，我提到这是一个元问题，但对我来说是一个重要问题，因为我在摆弄它的同时学到了很多东西。

希望我的教训会帮助别人运行到同样的问题，救他研究这个话题这么少的在线资源所需的时间：

你不能和可能不应该能够访问你的纯粹的内部控制。
如果您必须创建控件作为ES6类并访问this，即使您的linter不会再抱怨，因为这是很好的用例，所以有几种情况下可以扩展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中，并以与使用功能组件时相同的方式连接到该组件。我不知道如何有用的会是，但我会提供例如：

const localStore = createStore(
    (state = [], obj) => (obj ? { errorMessage: obj.error } : state), 
    { errorMessage: null }, 
); 

const inputWithStore = ({ error }) => { 
    let style = styles.input; 
    const onChange = (val) => { 
    if (val === 'test') localStore.dispatch({ type: 'unused', error: null }); 
    else localStore.dispatch({ type: 'unused', error: 'test required' }); 
    }; 
    if (error) { 
    style = styles.inputError; 
    } 
    return (
    <TextInput 
     style={style} 
     onChangeText={onChange} 
    /> 
); 
}; 

const mapStateToProps = (state) => ({ error: state.errorMessage }); 

const InputWithStore = connect(mapStateToProps)(inputWithStore); 

const Input =() => 
(
    <Provider store={localStore}> 
    <InputWithStore /> 
    </Provider> 
);

我依然会珍惜听力有关这些其他的方法和意见。谢谢。

来源

2016-09-19 18:13:57

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

回答

相关问题