Как изменить State родителя из дочернего элемента?

Question

[Дмитрий Кузьменко]

В родителе

getlogin = (text) => {
      this.setState({ login: text })
   }

   state = {
      component: <Addprofile getLogin={this.getLogin} />,
      login: ''
   }

В дочернем элементе вызываю через props

<TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Логин инстаграм"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {props.getLogin(text)}
               />

Ошибка Cannot read property 'getLogin' of undefined

Comments

[Роман Александрович]

а вот так ?
onChangeText = {(text)=>this.props.getLogin(text)}

и у вас ошибка в родителе в имени функции

getLogin = (text) => {
      this.setState({ login: text })
   }

   state = {
      component: <Addprofile getLogin={this.getLogin} />,
      login: ''
   }

[Антон Спирин]

Код дочернего компонента в студию. Еще вы в компонент передаете несуществующий метод и неправильно передаете хандлер.

[Дмитрий Кузьменко]

Роман Александрович, Так тоже пробовал, та же самая ошибка, если можно по конкретнее где именно ошибка в имени функции, пол дня мучаюсь с этим уже плохо соображаю)

[Роман Александрович]

Дмитрий Кузьменко, в родителе имя функции написанно с маленькой l getlogin а вызываете вы getLogin уже с большой L. Просто скопируйте мой код и вставьте в ваш.

[Антон Спирин]

Дмитрий Кузьменко, если дочерний компонент классовый, то к свойствам компонента надо обращаться через ключевое слово this.

[Дмитрий Кузьменко]

Антон Спирин, Дочерний "глупый" компонент, но информация ценна, понять не мог почему в некоторых компонентах через this, props получать, а в других без него.
Спасибо большое/

[Дмитрий Кузьменко]

Роман Александрович, Напишите в ответ, я отмечу решением

Answer 1

[Антон Спирин]

1. Исправляем имя хандлера:

getLogin = (text) => {
  this.setState({ login: text })
};

2. Исправляем передачу хандлера в TextInput:

<TextInput style = {styles.input}
  /* ... */
  onChangeText = {this.props.getLogin}
/>

Comments

[Дмитрий Кузьменко]

Спасибо большое, действительно запарился и не увидел что напутал с регистром в названии функции

Answer 2

[Роман Александрович]

getLogin = (text) => {
      this.setState({ login: text })
   }

   state = {
      component: <Addprofile getLogin={this.getLogin} />,
      login: ''
   }

Answer 3

[Алексей Рязанов]

this.props.getLogin(text)