javascript - 如何在 React Native 中调用父方法的子方法？

Question

当在我的父组件中触发单击事件时，我需要从 SearchBar 子组件调用方法 closeMenu()。我尝试了几种不同的方法来做到这一点，但没有一种方法有效。有谁知道如何做到这一点？

class Products extends Component {

constructor(props) {
    super(props);

    this.state = { closeMenu: false};

    this.hideSearchBar = this.hideSearchBar.bind(this);
}

hideSearchBar(e) {
    console.log('e: ', React.Children)
    this.setState({closeMenu: true});
    this.refs.SearchBar.closeMenu();
    this.setState({closeMenu: false});        
}

componentWillMount() {
    this.props.dispatch(getProductList());
}

render() {
    const {isLoading, products} = this.props.products;

    if (isLoading) {
        return <Loader isVisible={true}/>;
    }

    return (
        <TouchableWithoutFeedback onPress={(e) => this.hideSearchBar(e)} style={{zIndex: 0}}>
            <View style={styles.wrapper}>
                <Header/>
                <View style={styles.bodyWrapper}>
                    <ScrollView style={styles.scrollView}>
                        <ProductsContainer data={{productsList: { results: products }}}/>
                    </ScrollView>
                    <SearchBar ref="SearchBar" style={styles.searchBar} />
                </View>
                <Footer/>
            </View>
        </TouchableWithoutFeedback>
    );
}

我也试过在没有 refs 的情况下调用 closeMenu():

hideSearchBar(e) {
    this.setState({closeMenu: true});
    this.SearchBar.closeMenu();
}

这是 SearchBar 组件:

class SearchBar extends Component {
constructor(props) {
    super(props);
}

componentDidMount() {
    this.suggestions = [];
}

componentWillUpdate(nextProps, nextState) {
    console.log("COMPONENT WILL UPDATE");
    console.log(nextProps);
    console.log(nextState);
}

suggestionClick = (value) => {

}

getSuggestionText = (suggestion) => {

}

onChangeText = (value) => {
    this.selectedSuggestion = false
    this.props.dispatch(handleSearchItemText(value));
    console.log(this.props.products.searchResults);
}

onFocus() {
    const {height} = Dimensions.get('window');
    this.setState({
        contentOffset: {
            x: 0,
            y: height * 1 / 3
        }
    });
}

onBlur() {
    this.setState({
        contentOffset: {x: 0, y: 0}
    });
}

closeMenu = () => {
    this.props.products.searchResults = {};
}

componentWillReceiveProps() {
    if (!this.props.closeMenu) {
        this.props.closeMenu = false;
    }
}

renderSearches = () => {
    this.suggestions = this.props.products.searchResults;
    const suggestionTexts = Object.keys(this.props.products.searchResults || {})

    console.log(suggestionTexts);
    if (!suggestionTexts.length) {
        return null
    }
    // for android absolute element: https://github.com/facebook/react-native/issues/16951
    // https://gist.github.com/tioback/6af21db0685cd3b1de28b84981f31cca#file-input-with-suggestions-L54
    return (
        <View
            ref="suggestionsWrapper"
            style={autoStyles.suggestionsWrapper}
        >
            {
                this.suggestions.map((text, index) => (
                    <TouchableHighlight
                        key={index}
                        suggestionText={text}
                        activeOpacity={0.6}
                        style={autoStyles.suggestion}
                        onPress={this.suggestionClick(this.suggestions[text])}
                        underlayColor='white'
                    >
                        <Text style={autoStyles.suggestionText}>
                            {text}
                        </Text>
                    </TouchableHighlight>
                ))
            }
        </View>
    )
}

render() {
    const myIcon = (<Icon name="search" size={30} style={styles.searchIcon}/>);
    const slidersIcon = (<Icon name="sliders" size={30} style={styles.slidersIcon}/>);

    return (
        <TouchableWithoutFeedback style={{zIndex: 0}}>
            <View style={[styles.searchBar, this.props.style]}>
                <View style={styles.searchContainer}>
                    <View>
                        {slidersIcon}
                    </View>
                    <View style={styles.search}>
                        <View style={styles.searchSection}>
                            {myIcon}
                            <TextInput
                                style={styles.input}
                                placeholder="Search"
                                placeholderTextColor="rgba(0,0,0,0.7)"
                                onChangeText={(searchString) => {
                                    this.setState({searchString})
                                }}
                                underlineColorAndroid="transparent"
                                editable={true}
                                autoCorrect={false}
                                autoFocus={false}
                                autoCaptialize={'none'}
                                autoCorrect={false}
                                onChangeText={this.onChangeText}
                                enablesReturnKeyAutomatically={true}
                                onFocus={() => this.onFocus()}
                                onBlur={() => this.onBlur()}
                            />
                        </View>
                    </View>
                </View>
                {this.renderSearches()}
            </View>
        </TouchableWithoutFeedback>
    );
}

Answer 1

有些问题你应该避免:

永远不要改变 props:this.props.something = {} 是一种反模式。将 props 视为您的组件不拥有且不可变的数据。如果他们改变那么只是因为 parent 通过了新的 Prop 。

此外，您的 SeachBar 中还有多个未绑定(bind)到 this 但使用 this 的处理程序。不起作用。如果您想使用 this 或在 constructor 中绑定(bind)它们，请使用箭头函数。

您应该仔细考虑应用的架构。也许将搜索栏和结果列表分成两个独立的部分是个好主意。当用户键入要搜索的内容时，更新您的 redux 存储并在单独的组件中显示结果，您仅在有搜索结果时才呈现该组件。

我担心解决所有这些问题会超过 stackoverflow 答案的长度。也许你应该先回到基础，然后做真正好的 redux 教程。