Реагировать на собственный TextInput onSubmitEnding не работает - Создает синтетическое событие

Question

Желаемое состояние

У меня есть два поля ввода текста в оригинальном реагировании, и окончательный ввод из каждого поля должен быть добавлен в массив.Поэтому я использую onSubmitEditing, потому что в противном случае каждый введенный пользователем символ добавляется в массив, если я использую onChangeText.

Ошибка

onSubmitEditing вызывает функцию в родительском компонентеи выдает следующую ошибку

"ExceptionsManager.js: 84 Предупреждение. Это синтетическое событие используется повторно по соображениям производительности. Если вы видите это, вы получаете доступ к свойству nativeEvent в освобожденном / аннулированном синтетическомсобытие. Это значение равно нулю. Если вам нужно сохранить исходное синтетическое событие, используйте event.persist (). "

Я попытался переместить функцию в тот же файл, что не идеально, но я все еще получаюэтот массив возвращается вместо ввода текста.Кажется, в массиве нет ничего полезного.

"[SyntheticEvent]"

Код

Дочерний компонент

 <TextInput
    style={styles.signupInput}
    onSubmitEditing={(val) => this.props.saveFriends(val)}
    autoCorrect={false}
    autoFocus={true}
    placeholder={'friend one'}
    placeholderTextColor={'white'}
  />
  <TextInput
    style={styles.signupInput}
    onSubmitEditing={(val) => this.props.saveFriends(val)}
    autoCorrect={false}
    autoFocus={true}
    placeholder={'friend two'}
    placeholderTextColor={'white'}
  />

Родительский компонент

  saveFriends = (val) => {
    this.setState({
      friends: [
        ...this.state.friends,
        val
      ]
    })
}

Любая помощь будет принята с благодарностью!

Answer 1

Поэтому, когда вы используете свойство onSubmitEditing, параметр, который передается вашему обратному вызову, является объектом события.Чтобы получить доступ к вашему тексту и сохранить его в массиве, у вас есть два решения:

Первое решение, доступ к правильному свойству события

<TextInput
    style={styles.signupInput}
    onSubmitEditing={(event) => this.props.saveFriends(event.nativeEvent.text)}
    autoCorrect={false}
    autoFocus={true}
    placeholder={'friend one'}
    placeholderTextColor={'white'}
  />

Во-вторых, используйте Button и onChangeText, чтобы сохранить в состоянии компонента значение вашего ввода:

<TextInput
    style={styles.signupInput}
    onChangeText={(val) => this.setState({val})}
    autoCorrect={false}
    autoFocus={true}
    placeholder={'friend one'}
    placeholderTextColor={'white'}
  />
  
<Button
  onPress={() => this.props.saveFriends(this.state.val)}
/>

Надеюсь, это поможет.

Answer 2

попробуйте это

onSubmitEditing={() => this.props.saveFriends(val)}