Как показать ошибку при нажатии кнопки в React native? - PullRequest
Новая
       29

Как показать ошибку при нажатии кнопки в React native?

0 голосов
/ 04 декабря 2018

Я использую «response-native-material-textfield», и он работает хорошо, но мне нужно показать ошибку для пустого поля при нажатии на кнопку отправки.Я много искал, но не нашел решения.

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Согласно документации и примерам модуля, когда ваши ошибки 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>
    );
  }
}
0 голосов
/ 04 декабря 2018

Поместите сообщение об ошибке в ваше состояние и заполните его после нажатия на кнопку отправки, если ваш процесс проверки не пройден.

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

Проверьте пример в репозитории github для разработчиков.

...