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

Question

期望狀態

我在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
      ]
    })
}

任何幫助將不勝感激！

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