Я думаю, что знаю, что мне нужно сделать, чтобы моя функция 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.props.searchLocationChange(this.state.searchText)
Вы можете сделать что-то вроде ниже
<div className = "search-form__submit"><button onClick = {() => {this.props.searchLocationChange(this.state.searchText)}}>Search</button></div>
и определение функции должно быть
searchLocationChange(searchText) {
Вы уже передаете 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 Спасибо, что указали на это. Буквально я это пропустил.
Вы смешиваете контролируемое и неконтролируемое. Либо контролируемо, либо неконтролируемо. Так что возьмите поисковый текст только от родителя. Вышеупомянутое решение - один из способов сделать это. Другой способ - передать 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 теперь полностью контролируется.
Большое спасибо за вашу помощь - очень признателен.
Большое спасибо - ценю!