Доступ к состоянию вне класса - Reactnative - this.setState не является функцией

Question

Я использую пользовательские плавающие текстовые метки, которые находятся вне класса, и я хочу установить в нем состояние. как я могу это сделать, пожалуйста

У меня есть два плавающих текстовых поля, когда я нажимаю кнопку, я хочу установить состояние для введенных значений в поле ввода текста.

Ошибка - это получить

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

Итак, суть в том, что вам нужно передать компонент в импортированные обычные функции, чтобы вы могли установить состояние компонента.

То, что вы делаете, это старая методология. Я бы порекомендовал вам обрабатывать функции обработчика событий с помощью компонентов.

Пожалуйста, извините меня, если есть какие-либо опечатки, потому что я отвечаю на свой мобильный