React Native TextInput onSubmitEnding 不起作用 - 创建合成事件

Question

期望状态

我在 React Native 中有两个文本输入字段，每个字段的最终输入需要附加到一个数组。因此，我正在使用 onSubmitEditing，否则如果我使用 onChangeText，用户输入的每个字符都会附加到数组中。

错误

onSubmitEditing 调用父组件中的函数并给出以下错误

"ExceptionsManager.js:84 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist()."

我尝试将函数移动到同一个文件，这并不理想，但我仍然返回这个数组而不是文本输入。数组里好像没什么用。

[合成事件]

代码

子组件

 <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={() => this.props.saveFriends(val)}

Answer 2

因此，当您使用 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)}
/>

希望对您有所帮助。

React Native TextInput onSubmitEnding 不起作用 - 创建合成事件

React Native TextInput onSubmitEnding not working - Creates synthetic event

javascript

textinput

reactjs

react-native