複数行TextInputの送信/送信ボタンの検出

Question

React Native TextInputコンポーネントは、複数行入力として指定されている場合、onSubmitEditingイベントをサポートしていません。

何らかのテキストを入力した後、ユーザーが入力/送信/送信を（特定のキーボードレイアウトが指定されているかどうかに応じて）押したときを検出する方法はありますか？

Answer 1

iOSでは、これはドキュメントに従って動作するはずです。

は、onBlurイベント機能を使用します。テキスト入力は、IOSのみblurOnSubmitとの組み合わせで

ぼやけているときに呼び出され

コールバック：

trueの場合、テキストをフィールドは提出されるとぼやけます。デフォルト値は、単一行のフィールドの場合は 、複数行のフィールドの場合はfalseです。 blurOnSubmitをtrueに設定すると、 を返すとフィールドがぼやけて、フィールドに改行を挿入する代わりにonSubmitEditingイベント がトリガーされることを意味します（複数フィールドの場合は ）。

これを試してみます。

編集：中に反応し、ネイティブのために0.14.2を想定しているようblurOnSubmitは動作しません

をテスト完了 。 trueに設定されている場合でも、return/doneボタンとenterキーは改行を作成し、フィールドをぼかしません。

現時点では新しいバージョンでこれをテストすることはできません。

Answer 2

私はこれが古い投稿であることを認識していますが、私はここからGoogleに立ち会って解決策を共有したいと考えていました。提出の場合に起こる必要があるいくつかの事柄のために、単にぼかしているのに対して、私はonBlurを使って提出を解釈することができませんでした。

私は、onKeyPressリスナを使用してEnterキーを追跡し、次に送信を続けました。 （マージされ注が、これは現在唯一のiOS until this PRでサポートされています。）

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

注意、blurOnSubmitはまだあなたのonChangeTextハンドラに渡されるからリターンキーを防止するために必要とされます。

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

それをお試しください！それはラインの真ん中でも動作します！

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

}