69947

unable to access component with ref

Question:

Why is this.workmin.value undefined?

<pre class="snippet-code-js lang-js prettyprint-override">captureInput=(text)=>{ console.log('captureinput',this.refs.workmin.value) } render() { console.log('RENDER',this.state) return ( <View style={styles.container}> <Text style={styles.bigFont}>{`${this.state.timer + 'TIMER'}`}</Text> <Text style={styles.bigFont}>{`${this.state.min + ':' + this.state.sec}`}</Text> <View style={styles.button}> <Button title='START' onPress={()=>this.startToggle()} /> <Button title='RESET' onPress={()=>this.resetToggle()} /> </View> <View style={styles.row}> <Text style={[styles.bold,{marginRight:10},{width:112}, {textAlign:'right'}]}> Work Timer:</Text> <Text style={styles.bold}> min:</Text> <TextInput value={Math.floor(this.state.workTime / 60).toString()} ref= {(ref)=>{this.workmin=ref}} style={styles.input} onChangeText={(text) => {this.captureInput(text)}} /> </View> ) }

Answer1:

refs is deprecated, do this instead:

<TextInput ref={(ref) => { this.workmin = ref; }} />

Then you can use it like this.workmin.focus().

Recommend

  • NSTimer and updating UI
  • Prevent focus to URL bar with CTRL + L
  • Zooming an element and its contents— an alternative to CSS3's zoom property?
  • GDB skips over my code!
  • Receive mouse move even cursor is outside control
  • Undefined navigator.push React-native 0.43.4
  • Faster Way To Simultaneously Iterate Over Rolling Window Of Two Or More Numpy Arrays?
  • Best practice to eliminate magic numbers within a member function
  • How to plot large time series (thousands of administration times/doses of a medication)?
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How can I display the parent menu item's description using Wordpress walkers?
  • Multicolored edittext hint
  • D3 get axis values on zoom event
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Disable Enter in editText android
  • Alert pop up with LWUIT
  • Validaiting emails with Net.Mail MailAddress
  • MySQL WHERE-condition in procedure ignored
  • jquery mobile loadPage not working
  • Web-crawler for facebook in python
  • Unanticipated behavior
  • Cannot Parse HTML Data Using Android / JSOUP
  • trying to dynamically update Highchart column chart but series undefined
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • apache spark aggregate function using min value
  • Django query for large number of relationships
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • How to load view controller without button in storyboard?