Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
441 views
in Technique[技术] by (71.8m points)

React Native TextInput onSubmitEditing firing with every button press

I'm having trouble with onSubmitEditing firing with every button press of my input keyboard AND when the current page first loads (that part is especially puzzling). The TextInput code is as follows:

const TimerInput = () => {
    const [ value, onChangeText ] = React.useState('');
    return (
        <TextInput
            style={{
                backgroundColor: ColorScheme.Orange.e,
                borderRadius: 10,
                borderWidth: 0,
                fontSize: 25,
                height: 60,
                textAlign: 'center',
                shadowColor: 'gray',
                shadowRadius: 10,
                width: '80%',
            }}
            keyboardType = 'number-pad'
            onSubmitEditing = {FormatTime(value)}
            onChangeText = { text => onChangeText(text) }
            placeholder = { ' Hours : Minutes : Seconds ' }
            returnKeyType = 'done'
            value = {value}
        />
    );
}

The FormatTime function simply writes to the console at the moment while I've been trying to figure this out:

FormatTime = () => {
    return (
        console.log('test')
    );
}

The behavior I'm hoping to achieve is for this to run FormatTime only when the "Done" button is pressed to close the input keyboard. I will be completely honest in that I'm not fully certain how the TextInput is working (i.e. I'm so confused about the difference between the "value" and "text"), so I'm probably missing something obvious here. Thanks so much for your help.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Cause with every button-press (and when the page is first-loaded), there's a re-render ... with your code, it executes FormatTime .. .but it supposed to bind FormatTime as a handler for onSubmitEditing event

This way you pass a handler not a function call

 onSubmitEditing = {() => FormatTime(value)}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...