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存储库上检查example。

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>
    );
  }
}

如何在React Native中单击按钮时显示错误？

2 个答案: