如何在React native中显示按钮点击错误

Question

我使用的是"react native material textfield"，它运行良好，但在单击提交按钮时，我需要显示空字段的错误。我找了很多，但没有找到任何解决方案。

Answer 1

如果验证过程失败，请将错误消息放入您的状态，并在单击提交按钮后用消息填充。

render(){
return (
<View>
<TextField
{...props}
error={this.state.error}
errorColor={'red'}
onFocus={() => this.setState({error: ''})}
/>
<Button {...props} />
</View>)}

查看开发人员github存储库上的示例。

Answer 2

根据模块文档和示例，每当每个字段的this.state.errors不为空时，就会显示其错误。所以你的表格应该是这样的：

class Form extends Component {
// ... Some required methods
onSubmit() {
let errors = {};
['firstname'] // This array should be filled with your fields names.
.forEach((name) => {
let value = this[name].value();
if (!value) {
errors[name] = 'Should not be empty'; // The error message when field is empty
}
});
this.setState({ errors });
}
render() {
let { errors = {}, data } = this.state;
return (
<View>
<TextField
value={data.firstname}
onChangeText={this.onChangeText}
error={errors.firstname}
/>
<Text onPress={this.onSubmit}>Submit</Text>
</View>
);
}
}