將子組件的狀態傳遞給父組件？

Question

我想我知道我需要做些什么來使我的searchLocationChange函數工作，但我不知道該怎么做。 請原諒縮進，正在與StackOverflow的WYSIWYG進行斗爭！

這是我的父組件設置：

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.log(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,
                }
            });
        });
}

在我的Child組件中，邏輯是：

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

我意識到我正在嘗試使用來自Child組件狀態的searchText更新Parent組件，但我無法弄清楚我需要更改以使其工作。 我有一種偷偷摸摸的懷疑，我99％的路在那里，而且我只需要幾條線，但我可能會離開？

Answer 1

您已經從父級傳遞了searchLocationChange 。

在父組件中：

searchLocationChange(searchedText) {
console.log(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>
    );
  }

Answer 2

你應該像這樣調用函數this.props.searchLocationChange(this.state.searchText)

你可以做下面這樣的事情

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

和函數定義應該是

searchLocationChange(searchText) {

Answer 3

你是混合控制和不受控制的。 要么是受控制的，要么是不受控制的。 因此，僅從父級搜索文本。 以上解決方案是這樣做的一種方式。 另一種方法是將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組件現在已完全控制。