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

时间:2019-02-27 19:37:00

标签: javascript reactjs react-native textinput

期望状态

我在react native中有两个文本输入字段,每个字段的最终输入都需要附加到数组中。因此,我使用onSubmitEditing是因为如果使用onChangeText,否则用户输入的每个字符都会附加到数组中。

错误

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

“ ExceptionsManager.js:84警告:由于性能原因,此合成事件被重用。如果看到此消息,则说明您正在发布/无效的合成事件上访问属性nativeEvent。此属性设置为null。如果必须保留原始的合成事件,请使用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
      ]
    })
}

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:2)

因此,当您使用onSubmitEditing属性时,传递给回调的参数是事件对象。为了访问您的文本并将其保存到数组,您有两种解决方案:

第一个解决方案,访问事件的正确属性

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

第二,分别使用ButtononChangeText将输入值保存在组件状态:

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

希望这会有所帮助。

答案 1 :(得分:0)

尝试这个

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