Передача состояния дочернего компонента родительскому?

Я думаю, что знаю, что мне нужно сделать, чтобы моя функция searchLocationChange заработала, но я не совсем уверен, как это сделать. Пожалуйста, простите за отступ, я изрядно боролся с WYSIWYG StackOverflow!

Вот моя настройка родительского компонента:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            forecasts: [],
            location: {
                city: '',
                country: '',
            },
            selectedDate: 0,
            searchText: '',
        };
        this.handleForecastSelect = this.handleForecastSelect.bind(this);
        this.searchLocationChange = this.searchLocationChange.bind(this);
    }
}

С помощью этой конкретной функции я хочу поработать:

searchLocationChange() {
    console.info(this.state.searchText);
    Axios.get('https://mcr-codes-weather.herokuapp.com/forecast', {
            params: {
                city: this.state.searchText,
            },
        })
        .then((response) => {
            this.setState({
                forecasts: response.data.forecasts,
                location: {
                    city: response.data.location.city,
                    country: response.data.location.country,
                }
            });
        });
}

А в моем дочернем компоненте логика такова:

class SearchForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchText: '',
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const enteredText = event.target.value;
        this.setState({
            searchText: enteredText
        });
    }

    render() {
        return (
            <span className = "search-form">
              <div className = "search-form__input"><input type = "text" value = {this.state.searchText} onChange = {this.handleInputChange} /></div>
              <div className = "search-form__submit"><button onClick = {this.props.searchLocationChange}>Search</button></div>
            </span>
        );
    }
}

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
47
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы должны вызвать функцию, подобную этой this.props.searchLocationChange(this.state.searchText)

Вы можете сделать что-то вроде ниже

 <div className = "search-form__submit"><button onClick = {() => {this.props.searchLocationChange(this.state.searchText)}}>Search</button></div>

и определение функции должно быть

searchLocationChange(searchText) {

Большое спасибо - ценю!

J.Edge 29.10.2018 18:58
Ответ принят как подходящий

Вы уже передаете searchLocationChange от своего родителя.

в родительском компоненте:

searchLocationChange(searchedText) {
console.info(searchText);
Axios.get('https://mcr-codes-weather.herokuapp.com/forecast', {
  params: {
    city: searchText,
  },
})
  .then((response) => {
    this.setState({
      forecasts: response.data.forecasts,
      location: {
        city: response.data.location.city,
        country: response.data.location.country,
      },
    });
  });
}

у ребенка:

render() {
 const { searchText } = this.state;
    return (
      <span className = "search-form">
        <div className = "search-form__input"><input type = "text" value = {this.state.searchText} onChange = {this.handleInputChange} /></div>
        <div className = "search-form__submit"><button onClick = {()=>{this.props.searchLocationChange(searchText)}}>Search</button></div>

      </span>
    );
  }

вы вызываете функцию в onclick searchLocation. измените его на onClick = {() => this.props.searchLocationChange (searchText)}

simbathesailor 29.10.2018 15:32

@simbathesailor Спасибо, что указали на это. Буквально я это пропустил.

Sakhi Mansoor 29.10.2018 15:34

Вы смешиваете контролируемое и неконтролируемое. Либо контролируемо, либо неконтролируемо. Так что возьмите поисковый текст только от родителя. Вышеупомянутое решение - один из способов сделать это. Другой способ - передать searchTxt от родителя к потомку.

<SearchForm 
   searchTxt = {this.state.searchTxt}
   handleInputChange = {this.handleInputChange}
   searchLocationChange = {this. searchLocationChange}
/>

Переместите свой handleInputChange в родительский элемент:

handleInputChange = (event) => {
    const enteredText = event.target.value;
    this.setState({ searchText: enteredText });
  }

Затем измените соответствующую строку дочернего компонента на

 <div className = "search-form__input"><input type = "text" value = {this.props.searchText} onChange = {this.props.handleInputChange} /></div>

Теперь, когда вы попробуете приведенный выше код, он должен работать. Теперь вы сохраняете свой searchTxt в родительском компоненте. ваш компонент SearchForm теперь полностью контролируется.

Большое спасибо за вашу помощь - очень признателен.

J.Edge 29.10.2018 18:58

Другие вопросы по теме