javascript - 如何从自定义组件获取状态值到另一个父组件

Question

我有 2 个类(都是 React.Component)。假设其中一个是我自己的组件，它也构建在另一个自定义组件上(在我的例子中，它是 React Places Autocomplete )。 Just look at this picture

代码在这里:

//App.js
import React, { Component } from 'react';
import './App.css';
import PlaceAutocomplete from "./places_autocomplete";

class App extends Component {

    constructor(props) {
        super(props);
        this.state = { output: '' };
    }

    render() {
        return (
            <div className="App">
                <PlaceAutocomplete/>
                <p>{this.state.output}</p>
            </div>
        );
    }
}

export default App;


//places_autocomplete.js
import React, { Component } from 'react';
import './PlaceAutocomplete.css';
import PlacesAutocomplete from 'react-places-autocomplete';

class PlaceAutocomplete extends Component {
    constructor(props) {
        super(props);
        this.state = { address: '', output: '' };
    }

    handleChange = address => {
        this.setState({ address });
    };

    handleSelect = async address => {
        this.setState({address: address});
        this.state.output = address;
        document.getElementById('lsi').blur();
    };

    searchOptions = {
        types: ['(cities)']
    };

    hidden = (suggest) => {
        return suggest == null || suggest === ""
            ? "autocomplete-dropdown-container-hidden"
            : "autocomplete-dropdown-container";
    };

    render() {
        return (
            <PlacesAutocomplete
                value={this.state.address}
                onChange={this.handleChange}
                onSelect={this.handleSelect}
                searchOptions={this.searchOptions}>
                {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
                    <div>
                        <input value={this.state.address}
                               id={'lsi'}
                            {...getInputProps({
                                placeholder: 'Select a city',
                                className: 'location-search-input',
                            })}/>
                        <div className={this.hidden(suggestions[1])}>
                            {loading && <div>Loading...</div>}
                            {suggestions.map(suggestion => {
                                const className = suggestion.active
                                    ? "suggestion-item--active"
                                    : "suggestion-item";
                                // inline style for demonstration purpose
                                const style = suggestion.active
                                    ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                                    : { backgroundColor: '#ffffff', cursor: 'pointer' };
                                return (
                                    <div
                                        {...getSuggestionItemProps(suggestion, {
                                            className: className,
                                            style,
                                        })}
                                    >
                                        <span>{suggestion.description}</span>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                )}
            </PlacesAutocomplete>
        );
    }
}

export default PlaceAutocomplete;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

所以，你可以看到我是如何尝试找到解决方案的。这段代码看起来大多很难看，因为我不知道有任何其他方法来实现这些功能。

系统信息:

• 2018 年 8 月 17 日最新的 React(我不太记得了，但我知道它是最新的(我 1 周前安装的)。
• 此应用程序由 CRA(创建 React 应用程序)模板创建。因此，如果您的解决方案无法使用此模板(我认为有不同的样式，例如 ES6 等。但这不是重点)，请至少在您的答案中添加一个解释。

Answer 1

尝试将状态提升到父组件并使用回调来共享数据。正如 React 文档所述，React 应用程序中的数据更改应该有一个“真实来源”——这可以减少潜在的错误和重复的代码。看一眼 。 https://reactjs.org/docs/lifting-state-up.html