Detecting a submit / submit button in a multi-line text box

Question

The React Native TextInput component does not support the onSubmitEditing event if it is specified as multi-line input.

Is there a way to detect when the user presses the enter / send / send button (depending on which keyboard mask is specified) after entering some text?

Answer 1

I understand that this is an old post, but I immediately stumbled on Google and wanted to share my decision. Due to some things that should have happened in the case of submit, and not just blurring, I could not use onBlur to interpret submit.

I used the onKeyPress to track the Enter key, and then continued with the submission. ( Note , it is currently only supported on iOS until this PR is merged.)

 // handler onKeyPress = ({ nativeEvent }) => { if (nativeEvent.key === 'Enter') { // submit code } }; // component <TextInput autoFocus={true} blurOnSubmit={true} enablesReturnKeyAutomatically={true} multiline={true} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress} returnKeyType='done' value={this.props.name} /> 

Note. blurOnSubmit is still required to prevent the return key from being passed to your onChangeText handler.

Answer 2

On iOS, this should work as per the documentation.

Use the onBlur function:

Callback caused by blurring text input

In combination with ios only blurOnSubmit:

If true, the text box will be blurry when submitted. The default value is true for single-line fields and false for multi-line fields. Note that for multi-line fields, setting blurOnSubmit to true means that pressing return erodes the field and fires the onSubmitEditing event instead of inserting a new line into the field.

I will try to verify this.

Edit: Finish testing

blurOnSubmit does not work as expected in 0.14.2 reaction mode. Even if set to true, the back / end button and enter the key, just create a new line and do not blur the field.

I cannot verify this on newer versions at the moment.

Answer 3

 constructor () { super() this.state = { text : '', lastText : '', inputHeight:40 } } writing(text){ this.setState({ text : text }) } contentSizeChange(event){ if(this.state.lastText.split("\n").length != this.state.text.split("\n").length){ this.submitTextInput(); }else{ this.setState({ inputHeight : event.nativeEvent.contentSize.height }) } } submitTextInput(){ Alert.alert('submit input : ' + this.state.text); this.setState({ text : '' }) } render() { return ( <View style={{flex:1,backgroundColor:'#fff'}}> <TextInput style={{height:this.state.inputHeight}} multiline={true} onChangeText={(text) => this.writing(text)} onContentSizeChange={(event) => this.contentSizeChange(event)} onSubmitEditing={() => this.submitTextInput()} value={this.state.text} /> </View> ); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 

Answer 4

Give it a try! He also works in the middle of the line.

 <TextInput placeholder={I18n.t('enterContactQuery')} value={this.state.query} onChangeText={text => this.setState({ query: text, allowEditing: true })} selection = {this.state.selection} onSelectionChange={(event) => this.setState({ cursorPosition: event.nativeEvent.selection, selection: event.nativeEvent.selection, allowEditing: true })} onSubmitEditing={() => { const { query, cursorPosition } = this.state; let newText = query; const ar = newText.split(''); ar.splice(cursorPosition.start, 0, '\n'); newText = ar.join(''); if (cursorPosition.start === query.length && query.endsWith('\n')) { this.setState({ query: newText }); } else if (this.state.allowEditing) { this.setState({ query: newText, selection: { start: cursorPosition.start + 1, end: cursorPosition.end + 1 }, allowEditing: !this.state.allowEditing }); } }} multiline = {true} numberOfLines = {10} blurOnSubmit={false} editable={true} // clearButtonMode="while-editing" /> constructor(props) { super(props); this.state = { query: '', cursorPosition: [0,0], selection: null, allowEditing: true } 

}