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组件现在已完全受控。

将子组件的状态传递给父组件？

3 个答案: