Форма Redux: поле не проходит проверку, несмотря на то, что оно уже заполнено значениями - PullRequest
Новая
       20

Форма Redux: поле не проходит проверку, несмотря на то, что оно уже заполнено значениями

0 голосов
/ 08 мая 2018

У меня есть форма с именем UpdateForm с некоторыми полями:

  • Название
  • URL
  • Метки

Поля формы уже заполнены значениями, которые пользователь может изменять по своему усмотрению и обновлять.

enter image description here

Одно предостережение заключается в том, что когда вы открываете экран UpdateForm и нажимаете «Обновить» без изменения каких-либо полей, поле, которое первоначально затрагивается при открытии экрана, не проходит проверку, несмотря на наличие значений, которые должны позволить ему пройти проверку. ,

В приведенном выше примере поле «Теги» изначально касается, когда я открываю экран, а затем, когда я нажимаю «Обновить», поле «Теги» получает ошибку проверки.

Единственный способ пройти проверку - щелкнуть в этом поле ввода.

UpdateForm.js 

return (
      <View style={formContainer}>
        <View style={headerContainer}>
          <Text style={headerText}>Update Bookmark</Text>
        </View>
        <View style={inputContainer}>
          <Field name="title" label="Title" component={Input} val={title} />
          <Field name="url" label="URL" component={Input} val={url} />
          <Field name="tags" label="Tags" component={Input} val={tagsString} />
          <View style={buttonContainer}>
            <Button color="#007aff" onPress={ this.props.handleSubmit(this.onSubmit.bind(this))}>Update</Button>
          </View>
        </View>
      </View>
    );

function validate(values) {
  const errors = {};

  const URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/;

  if (!values.title) {
    errors.title = "Please provide a title";
  }

  if (!values.url || !URL_REGEX.test(values.url)) {
    errors.url = "Please provide a valid URL";
  }

  if (!values.tags) {
    errors.tags = "Please provide some tags separated by commas";
  }

  return errors;
}

UpdateForm = reduxForm({
  form: 'updateForm',
  validate
})(UpdateForm);

Input компонент поля: 

const Input = ({ input: { onChange, ...restInput }, label, val, meta: { error, touched } }) => {
  const {
    inputBox,
    labelText,
    inputContainer,
    errorContainer,
    errorText
  } = styles;
  console.log('Touched:', touched, val);
  return (
    <View>
      <View style={inputContainer}>
        <Text style={labelText}>{label}</Text>
        <TextInput
          { ...restInput }
          style={inputBox}
          autoCorrect={false}
          autoCapitalize={'none'}
          onChangeText={onChange}
          clearButtonMode='while-editing'
          autoFocus={true}
          value={val}
        />
      </View>
      <View style={errorContainer}>
        <Text style={errorText}>{touched && error}</Text>
      </View>
    </View>

  );
};

tldr; Поле ввода первого прикосновения не проходит проверку, несмотря на прикосновение и наличие предварительно заполненных значений для проверки. Необходимо щелкнуть поле ввода, прежде чем оно пройдет проверку. Как исправить?

EDIT:

Способ, которым я в настоящее время передаю начальные значения на мои поля, довольно сложен.

Верхний уровень У меня есть компонент BookmarkList, который выбирает все закладки с удаленного сервера API. Каждая закладка имеет свой собственный заголовок, URL и значения тегов.

Значения

title, URL и tags передаются от BookmarkList до BookmarkDetail, что делает каждую отдельную закладку: 

class BookmarkList extends Component {
  static navigationOptions = {
    title: 'My Bookmarks'
  };

  constructor(props) {
    super(props);
    this.props.fetchBookmarkList();
  }

  renderBookmarks() {
    return this.props.bookmarks.map(bookmark =>
      <BookmarkDetail key={bookmark.title} bookmark={bookmark} />
    );
  }

  render() {
    return (
      <ScrollView>
        {this.renderBookmarks()}
      </ScrollView>
    );
  }
}

Каждый BookmarkDetail имеет кнопку «Обновить», которая перемещает параметры через навигатор, например: 

<Button color='#007aff' onPress={() => this.props.navigation.navigate('UpdateBookmark', {
              _id: _id,
              title: title,
              url: url,
              tags: tags
            })}>
              Update
            </Button>

Затем в UpdateForm я беру эти начальные значения, используя navigation.getParam, как перед тем, как устанавливать их в полях ввода: 

const { navigation } = this.props;
    const _id = navigation.getParam('_id', 'NO-ID');
    const title = navigation.getParam('title', 'NO-TITLE');
    const url = navigation.getParam('url', 'NO-URL');
    const tags = navigation.getParam('tags', 'NO-TAGS');
    const tagsString = tags.join(", ");
...