Question

我试图从组件中获取值，但继续获取未定义的引用。这是我的代码。从一个函数onClickSave（），我试图得到this.refs得到ref的值＆＃34;输入＆＃34;在TextInputCell组件中，但它未定义。我的代码不正确吗？

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：字符串参考

如果您之前使用过React，那么您可能熟悉旧版本   其中ref属性是字符串的API，如“textInput”和DOM   节点作为this.refs.textInput访问。我们建议反对它，因为   字符串引用有一些问题，被认为是遗留的，很可能   在将来的一个版本中删除。如果您目前正在使用   this.refs.textInput访问refs，我们建议使用回调模式   代替。

示例

<ActionBar3 barTitle={title} navigation={this.props.navigation} onClickSave={ () => this.onClickSave()} /> <TextInputCell value={value} ref={(ref) => { this.inputRef = ref; }} />

反应原生。从ref属性获取值

1 个答案: