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（我真的不记得了，但我确实知道它是最新的（我是在一周前安装的）。
此应用程序由CRA（创建React应用程序）模板创建。因此，请，如果您的解决方案无法与此模板一起使用（我认为还有其他样式，例如ES6等，但这不是重点），那么请至少为您的答案添加一个解释。

Answer 1

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

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

1 个答案: