时间戳

首页 > 解决方案 > 访问类外的状态 - Reactnative - this.setState 不是函数

reactjs - 访问类外的状态 - Reactnative - this.setState 不是函数

问题描述

我正在使用类外部的自定义浮动文本标签，我想在其中设置状态。请问我该怎么做

当我单击按钮时，我有两个浮动文本字段，我想将状态设置为输入文本字段中输入的值。

错误是得到是

this.setState 不是函数

const TextfieldWithFloatingLabel_Card = MKTextField.textfieldWithFloatingLabel()
  .withPlaceholder(strings.nineDigitCardNumber)
  .withStyle(styles.textfieldWithFloatingLabel)
  .withTextInputStyle({ flex: 1 })
  .withFloatingLabelFont({
    fontSize: 12,
    fontWeight: '200',
    color: colors.primaryColor
  })
  .withKeyboardType('numeric')
  .withOnEndEditing(e => {
    this.setState({ cardDigits: e.nativeEvent.text });
    console.log('EndEditing', e.nativeEvent.text);
  })
  .build();

const TextfieldWithFloatingLabel_NationalId = MKTextField.textfieldWithFloatingLabel()
  .withPlaceholder(strings.nationalIdNumber)
  .withStyle(styles.textfieldWithFloatingLabel)
  .withTextInputStyle({ flex: 1 })
  .withFloatingLabelFont({
    fontSize: 12,
    fontWeight: '200',
    color: colors.primaryColor
  })
  .withKeyboardType('numeric')
  .withOnEndEditing(e => {
    this.setState({ nationalIdNumber: e.nativeEvent.text });
    console.log('EndEditing', e.nativeEvent.text);
  })
  .build();

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardDigits: '',
      IdNumber: ''
    };
  }

  render() {
    //console.log('rovers - ' + JSON.stringify(this.state.rovers))
    return (
      <ScrollView style={styles.mainContainer}>
        <TextfieldWithFloatingLabel_Card ref="tiNumber" />
        <TextfieldWithFloatingLabel_NationalId ref="tiNationalId" />
        <TouchableOpacity
          title="Transactions"
          style={{
            height: 60,
            backgroundColor: '#673fb4',
            marginTop: 20,
            alignItems: 'center',
            justifyContent: 'center'
          }}
          onPress={() => {
            consoleLog(
              'cardnum : ' +
                this.state.cardDigits +
                ' national id - ' +
                this.state.IdNumber
            );
          }}
        >
          <CommonText style={{ color: 'white' }}>
            {strings.signInLower}
          </CommonText>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

谢谢R

标签： reactjsreact-nativesetstatereact-state-management

解决方案

改变

TextfieldWithFloatingLabel_Card

对于函数而不是变量，以及在组件中调用 TextfieldWithFloatingLabel_Card 的任何位置，都将其作为参数传递给它，以便在执行 setState 时它会起作用

我会给你提示如何做

测试.js

 const test = this = {
      this.setState({test: “working”});
 }
 export = test();

App.js 组件

 import { test } from “./Test”;

 callTest = () => {
     test(this);
 }
 render(){
     return(
          <div onClick={this.callTest}>

          </div>
     )
 }

所以这里的重点是您需要将组件 this 传递给导入的常规函数​​，以便您可以设置组件的状态。

您所做的是旧方法。我建议您使用组件处理事件处理函数。

如果有任何拼写错误，请执行我，因为我正在手机上回答

推荐阅读