एक बहु-पंक्ति टेक्स्ट इनपुट

Question

में भेजें/सबमिट बटन का पता लगाना प्रतिक्रिया मूल TextInput घटक onSubmitEditing ईवेंट का समर्थन नहीं करता है यदि यह बहु-पंक्ति इनपुट के रूप में निर्दिष्ट किया गया है।

वहाँ उपयोगकर्ता दर्ज/प्रस्तुत/भेज प्रेस जब पता लगाने के लिए एक रास्ता है कुछ पाठ दर्ज करने के बाद (निर्भर करता है जो कीबोर्ड लेआउट पर निर्दिष्ट किया जाता है) बटन?

Answer 1

आईओएस पर यह दस्तावेज़ीकरण के अनुसार काम करना चाहिए।

उपयोग onBlur समारोह:

कॉलबैक कि जब पाठ इनपुट केवल ios blurOnSubmit साथ

धुंधली होती संयोजन में कहा जाता है:

सच हैं, तो लेख सबमिट किए जाने पर क्षेत्र धुंधला होगा। डिफ़ॉल्ट मान सिंगल-लाइन फ़ील्ड के लिए सच है और मल्टीलाइन फ़ील्ड के लिए झूठा है। नोट बहु क्षेत्रों के लिए है कि , सच का मतलब है कि वापसी दबाने के क्षेत्र में एक नई पंक्ति डालने के बजाय क्षेत्र को धुंधला और onSubmitEditing घटना गतिवान करेगी blurOnSubmit की स्थापना।

मैं इस परीक्षण की कोशिश करेंगे।

संपादित करें: परीक्षण

blurOnSubmit है जैसे कि यह प्रतिक्रिया देशी 0.14.2 चाहिए था काम नहीं करता हो गया। यहां तक ​​कि जब सत्य पर सेट किया जाता है, तो वापसी/किया गया बटन और कुंजी दर्ज करें, बस एक नई लाइन बनाएं और फ़ील्ड को धुंधला न करें।

मैं इस समय नए संस्करणों पर इसका परीक्षण करने में सक्षम नहीं हूं।

Answer 2

मुझे पता है यह एक पुरानी पोस्ट है, लेकिन मैं गूगल से यहाँ ठोकर खाई और मेरे समाधान साझा करना चाहते थे। जमा करने के मामले में होने वाली कुछ चीजों के कारण, बस धुंधला बनाम, मैं सबमिट करने की व्याख्या करने के लिए onBlur का उपयोग करने में सक्षम नहीं था।

मैंने Enter कुंजी को ट्रैक करने के लिए onKeyPress श्रोता का उपयोग किया, और फिर सबमिट के साथ आगे बढ़े। (नोट, इस वर्तमान में केवल 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 
} 

}