Rilevamento del pulsante di invio/invio in un oggetto TextInput a più righe

Question

Il componente React Native TextInput non supporta l'evento onSubmitEditing se specificato come ingresso a più righe.

C'è un modo per rilevare quando l'utente preme il pulsante invio/invio/invio (a seconda del layout di tastiera specificato) dopo aver inserito del testo?

Answer 1

Su iOS questo dovrebbe funzionare secondo la documentazione.

usando l'onBlur:

callback che viene chiamata quando il metodo di scrittura è sfocata

In combinazione con i soli ios blurOnSubmit:

se è vero, il testo il campo si confonderà quando inviato. Il valore predefinito è true per i campi unifilari e false per i campi multilinea. Notare che per i campi multilinea, impostando blurOnSubmit su true significa che premendo il ritorno sfocerà il campo e attiverà l'evento onSubmitEditing invece di inserire una nuova riga nel campo.

Proverò a testare questo.

Edit: test effettuati

blurOnSubmit non funziona come dovrebbe reagire nativo 0.14.2 in. Anche se impostato su true, il pulsante return/done e il tasto invio creano solo una nuova riga e non sfocare il campo.

Non riesco a testare questo sulle versioni più recenti al momento.

Answer 2

Mi rendo conto che questo è un vecchio post, ma sono inciampato qui da Google e volevo condividere la mia soluzione. A causa di alcune cose che dovevano accadere nel caso di submit, vs semplicemente sfocatura, non ero in grado di usare onBlur per interpretare submit.

Ho utilizzato un listener onKeyPress per tracciare la chiave e quindi ha proceduto con l'invio. (nota, questo è attualmente supportato solo in iOS until this PR è fusa.)

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

nota, il blurOnSubmit è ancora necessario per evitare che la chiave di ritorno da essere passato al vostro onChangeText gestore.

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

Provalo! Funziona anche nel mezzo della linea!

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

}