React Native. ref 속성에서 값 가져 오기

Question

구성 요소에서 가치를 얻으 려하지만 정의되지 않은 참조를 계속 얻으려고합니다. 내 코드는 다음과 같습니다. onClickSave() 함수에서 this.refs가 TextInputCell 구성 요소의 ref "input"값을 가져 오려고했지만 정의되지 않았습니다. 코드가 올바르지 않습니까?

import React from 'react'; 
import { View, Text } from 'react-native'; 
import { Form, Section, TextInputCell } from 'react-native-forms'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

import ActionBar3 from '../components/ActionBar3'; 
import * as profileActions from '../actions/profileActions'; 

const GLOBAL = require('../GlobalConstants'); 

class ProfileViewEdit extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onClickSave.bind(this); 
    } 

    componentDidMount() { 
    console.log('componentDidMount'); 
    } 

    onClickSave() { 
    console.log('aaabd'); 
    console.log(this.refs); 
    } 

    render() { 
    const title = this.props.navigation.state.params.title; 
    let value = this.props.navigation.state.params.value; 
    return (
     <View style={{ flex: 1, backgroundColor: '#EFEFF4' }}> 
      <ActionBar3 
      barTitle={title} navigation={this.props.navigation} onClickSave={this.onClickSave} 
      /> 
      <Section 
       title={title} 
       //helpText={'The helpText prop allows you to place text at the section bottom.'} 
      > 
       <TextInputCell 
       value={value} 
       ref="input" 
       /> 
      </Section> 
     </View> 
    ); 
    } 
} 

const mapStateToProps = (state) => ({ 
    stateProfile: state.profile 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    actions: bindActionCreators(profileActions, dispatch) 
}); 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(ProfileViewEdit); 

Answer 1

이벤트를 올바르게 처리하지 못하는 것. 이벤트에 this을 사용하려면 this을 바인딩해야합니다. 화살표 기능은 자체 바인딩하지만 수동으로 바인드 할 수 있습니다. 자세한 내용은 here입니다.

JSX 콜백에서 this의 의미에주의해야합니다. JavaScript에서는 클래스 메서드가 기본적으로 바인딩되지 않습니다. 을 잊어 버리고 this.handleClick을 바인딩하고 onClick에 전달하면 함수가 실제로 호출 될 때 이 정의되지 않습니다.

두 번째 문자열 참조가 더 이상 제안되지 않습니다. 기능적인 것을 사용해야합니다. 그 자세한 정보는 here입니다.

레거시 API : 이전에 반작용와 함께 일하면 문자열 참고 문헌

, 당신은 심판 속성이 문자열 "에서 textInput"와 같은이며, 이전 API 및 DOM 에 익숙 수 있습니다 노드는 this.refs.textInput으로 액세스됩니다. 문자열 참조에 몇 가지 문제가 있으며 기존 것으로 간주되어 향후 릴리스 중 하나에서 이 제거 될 가능성이 있기 때문에 반대하는 것이 좋습니다. 현재 this.refs.textInput을 사용하여 심판에 액세스하는 경우 대신 콜백 패턴을 사용하는 것이 좋습니다.

예

<ActionBar3 barTitle={title} navigation={this.props.navigation} onClickSave={() => this.onClickSave()} /> 

<TextInputCell value={value} ref={(ref) => { this.inputRef = ref; }} />