Блог

Главная - Вопросы по программированию - Проблема с непрямым взаимодействием между родительскими и дочерними элементами

Проблема с непрямым взаимодействием между родительскими и дочерними элементами

#javascript #reactjs #react-native #frontend #dom-events

#javascript #reactjs #react-native #интерфейс #dom-события

Вопрос:

У меня проблема с непрямым взаимодействием в react native.

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

Родительский:

 constructor(props) {
  super(props);

  this.state = {
    search: '',
  };
 }

getInfoSearch(userSearch) {
 this.setState({
   search: userSearch
 })
}

render(){
  return(
   <SearchHeader placeholder={'Buscar procedimento'} getValueUserSearch={this.getInfoSearch}/>
  )
}

Дочерний:

 import React, {useState} from 'react';
import {View, TextInput} from 'react-native';

const SearchHeader = props => {
  const [search, setSearch] = useState('');

  const {placeholder, getValueUserSearch} = props;

  const handleSearch = (search) => {
    console.log(this);
    setSearch(search);
    getValueUserSearch(search);
  };

  return (
    <View>
      <TextInput placeholder={placeholder || 'Buscar'} onChangeText={handleSearch}/>
    </View>
  );
};

export default SearchHeader;

Но когда я набираю текст в inputText, возникает ошибка. Заявляя, что:

«Я не могу применить функцию setState для undefined»

Вы знаете, как я мог бы решить эту проблему? Потому что я хочу изменить состояние ‘search’ в родительском элементе.

Комментарии:

1. Используйте функцию arrow для getInfoSearch . Еще выполните привязку в constructor

2. Значение метода this inside getInfoSearch может быть не таким, каким вы его ожидаете. Попробуйте войти this внутрь getInfoSearch и посмотреть, каково его значение.

Ответ №1:

Ошибка может быть из-за this.setState строки в getInfoSearch функции.

Попробуйте использовать arrow function или выполните явную привязку в constructor , как показано ниже

 constructor(props) {
  ...
  this.getInfoSearch = this.getInfoSearch.bind(this);
}

(Или)

 getInfoSearch = (userSearch) => {
  this.setState({ search: userSearch });
}

Проверьте здесь для получения более подробной информации.

Ответ №2:

Это потому, что вы не передаете аргумент handleSearch функции, он должен быть:

  onChangeText={(event) => handleSearch(event.target.value}