प्रतिक्रियात्मक स्पष्ट टेक्स्ट एकाधिक टेक्स्ट इनपुट बॉक्स

Question

मुझे एक फेसबुक पर उदाहरण कोड मिला है जो मूल पृष्ठ पर क्लिक करता है जो दिखाता है कि एक क्लिक पर टेक्स्ट साफ़ करने के लिए setNativeProp का उपयोग कैसे करें, लेकिन मैं नहीं देख सकता कि इसे एकाधिक टेक्स्ट बॉक्स के साथ कैसे किया जाए। यहां कोड है:

var App = React.createClass({ 
    clearText() { 
    this._textInput.setNativeProps({text: ''}); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <TextInput ref={component => this._textInput = component} 
       style={styles.textInput} /> 
     <TouchableOpacity onPress={this.clearText}> 
      <Text>Clear text</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}); 

रेफरी फ़ंक्शन में तय किया गया है, इसलिए हमेशा उसी टेक्स्ट इनपुट बॉक्स को लक्षित करेगा। मैं किसी भी टेक्स्ट इनपुट बॉक्स को इंगित करने के लिए फ़ंक्शन को कैसे बदल सकता हूं?

Answer 1

यह काम करना चाहिए। ध्यान दें कि TextInput पर रेफरी जिसे आप clearText functino से कॉल करते हैं उसे होना चाहिए।

var App = React.createClass({ 
    clearText(fieldName) { 
    this.refs[fieldName].setNativeProps({text: ''}); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <TextInput ref={'textInput1'} style={styles.textInput} /> 
     <TouchableOpacity onPress={() => this.clearText('textInput1')}> 
      <Text>Clear text</Text> 
     </TouchableOpacity> 
     <TextInput ref={'textInput2'} style={styles.textInput} /> 
     <TouchableOpacity onPress={() => this.clearText('textInput2')}> 
      <Text>Clear text</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}); 

विभिन्न क्षेत्रों को साफ़ करने के लिए मेरा उत्तर अपडेट किया गया।

Answer 2

आप टेक्स्ट इनपुट के पाठ को साफ़ करने के लिए इस तरह कुछ भी उपयोग कर सकते हैं।

clearText(fieldName) { 
    this.refs[fieldName].clear(0); 
},