Question

我正在使用自定义的浮动文本标签，这些标签在类之外，我想在其中设置状态。我该怎么办

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

错误是get

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

Answer 1

更改

TextfieldWithFloatingLabel_Card

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

我会给你提示如何做

Test.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>
     )
 }

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

您正在做的是旧方法。我建议您使用in组件处理事件处理程序函数。

如果有错字，请执行死刑，因为我正在用手机接听电话

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

1 个答案: