Erkennen der Send/Submit-Taste in einem mehrzeiligen TextInput

Question

Die Komponente React Native TextInput unterstützt das Ereignis onSubmitEditing nicht, wenn es als mehrzeiliger Eingang angegeben wurde.

Gibt es eine Möglichkeit zu erkennen, wenn der Benutzer die Eingabe/einreichen/Senden (je nachdem, welche Tastaturlayout angegeben) Taste nach der Eingabe von Text?

Answer 1

Auf iOS sollte dies gemäß der Dokumentation funktionieren.

Verwenden Sie die onBlur Funktion:

Rückruf, der aufgerufen wird, wenn die Texteingabe

verschwimmt

In Kombination mit dem ios nur blurOnSubmit:

Wenn dies zutrifft, wird der Text Feld wird verwischen, wenn sie gesendet werden. Der Standardwert ist wahr für einzeilige Felder und false für mehrzeilige Felder. Beachten Sie, dass für mehrzeilige Felder, das Setzen von blurOnSubmit auf true bedeutet, dass Rückkehr Drücken des Feldes wird verschwimmen und lösen die onSubmitEditing Ereignis stattdessen eine neue Zeile in das Feld einzufügen.

Ich werde versuchen, dies zu testen.

Edit: Prüfung Fertig

blurOnSubmit funktioniert nicht wie es angenommen hat, um in reagieren-native 0.14.2. Auch wenn sie auf "True" gesetzt sind, erstellen Sie mit der Return/Done-Taste und der Enter-Taste einfach eine Newline und verwischen das Feld nicht.

Ich bin das nicht in der Lage zur Zeit auf neuere Versionen zu testen.

Answer 2

Ich weiß, das eine alte Post, aber ich stolperte hier von Google und wollte meine Lösung teilen. Aufgrund einiger Dinge, die im Fall von submit passieren mussten, oder einfach nur verschwimmen, konnte ich onBlur nicht verwenden, um submit zu interpretieren.

Ich verwendete einen onKeyPress Listener, um den Schlüssel Enter zu verfolgen, und fuhr dann mit dem Senden fort. (Hinweis, das derzeit nur in iOS unterstützt wird until this PR verschmolzen wird.)

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

Hinweis wird die blurOnSubmit noch erforderlich, um die Return-Taste, um zu verhindern, um Ihre onChangeText Handler übergeben werden.

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

Versuchen Sie es! Es funktioniert auch in der Mitte der Linie!

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

}