反应原生文本输入；按下“完成”时触发事件答案

【问题标题】：react native textInput; trigger event when "Done" is pressed反应原生文本输入；按下“完成”时触发事件
【发布时间】：2020-09-23 18:19:14
【问题描述】：

我正在使用 textInput 来获取用户年龄，因此在 iOS 上我将数字键盘和返回键类型设置为“完成”，所以我正在使用

returnKeyType={'done'}
keyboardType="numeric"

到目前为止，我只是想弄清楚当用户点击“完成”按钮时如何做某事。

这是我当前的文本输入字段

<TextInput
    placeholder="Age (Yr)"
    style={AuthScreenStyles.Input}
    autoCapitalize="none"
    autoCorrect={false}
    returnKeyType={'done'}
    keyboardType="numeric"
    ref={register({ name: 'age_year' }, { required: true })}
    onChangeText={(text) => setValue('age_year', text, true)}
    onSubmitEditing={() => {
        console.log('The button has been pressed');
    }}
/>

我还没有让这个 console.log() 触发。有人知道按下完成按钮时如何捕捉吗？ onSubmitEditing() 不起作用。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

过去我记得它不适用于“multiline={true}”

我设置了一个警报进行测试，并使用事件本身来获取文本。应该工作:)

expo 中的一个例子：https://snack.expo.io/VPv8Axz4B

    <TextInput
    placeholder="Age (Yr)"
    style={AuthScreenStyles.Input}
    autoCapitalize="none"
    autoCorrect={false}
    returnKeyType={'done'}
    keyboardType="numeric"
    ref={register({ name: 'age_year' }, { required: true })}
    onChangeText={(text) => setValue('age_year', text, true)}
    onSubmitEditing = {(event) => (Alert.alert(event.nativeEvent.text))}
    multiline={false}
/>

【讨论】：

【解决方案2】：

更明确一点，@MattV 的回答是正确的，请注意，如果您使用他的示例，您还需要import {Alert} from 'React Native'

但是如果您想在按下Done 按钮时使用自己的function，如下图所示。

然后你可以像这样添加onSubmitEditing onSubmitEditing={() => yourFunctionNameHere()}

<TextInput
                  style={styles.textBox}
                  maxLength={5}
                  placeholder="Enter Zip Code"
                  placeholderTextColor={'#6D7376'}
                  autoCompleteType="postal-code"
                  keyboardType="number-pad"
                  returnKeyType="done"
                  onChangeText={text => setZip(text)}
                  onSubmitEditing={() => yourFunctionNameHere()} // <=== here
                />

【讨论】：