Question

我想创建一个标签云，让人们可以打开或关闭标签作为搜索过滤器。我将其作为结果页面上的标签显示（我正在使用焊剂布线，如果相关的话）。

我正在使用名为ToggleButton的自定义组件，它通过更改颜色在启用/禁用状态之间翻转。

在我的容器中，我将回调函数作为按钮传递给按钮，如下所示：

onStateChangeCallback = (newState, buttonId) => {
    console.log("container " + newState + " " + buttonId);
}

render = () => {                
    const { Layout, tags } = this.props;        
    return (
      <Layout
        tags={tags}
        onStateChange={this.onStateChangeCallback}            
      />
    );
}

const mapDispatchToProps = {
    toggleTag,    
};

const mapStateToProps = state => ({    
    tags: state.tagfilterreducer.tags || [],
});

Layout组件如下所示：

const RecipeTagFilterComponent = ({tags, onStateChange}) => {

  return (
    <Container>
      <FlatList
        numColumns={2}
        data={tags}
        renderItem={({ item }) => (
          <ToggleButton textValue={item.name} onStateChange={onStateChange} buttonId={item.id} />
        )}
      />
    </Container>
  );

}

ToggleButton类如下所示：

export default class ToggleButton extends Component {

    constructor(props) {
        super(props)        
    }

    state = {    
    }

    render() {
        return (
            <View style={styles.container}>
                <SimpleToggleButton textValue={this.props.textValue} onStateChange={this.props.onStateChange} buttonId={this.props.buttonId} />
            </View>
        );
    }

}

最后，SimpleToggleButton看起来像这样：

class SimpleToggleButton extends Component {

    state = {
        toggle: false,
    }

    _onPress() {
        const newState = !this.state.toggle;
        this.setState({toggle:newState});
        this.props.onStateChange && this.props.onStateChange(newState, this.props.buttonId);
    }


    render() {
        const {toggle} = this.state;
        const buttonTextColor = toggle ? "white" : "black";
        const buttonBackground = toggle ? "dodgerblue" : "#BDBDBD";

        return (
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity
                    onPress={() => this._onPress()}
                    style={{margin:10, flex: 1, height: 60, backgroundColor: buttonBackground, justifyContent:'center', borderRadius: 30}}
                    >

                    <Text style={{color:buttonTextColor , backgroundColor: 'transparent', textAlign: 'center', fontSize:16}}>{this.props.textValue}</Text>


                </TouchableOpacity>
            </View>
        );
    }

}

按下按钮时，我的回调功能正常执行。

如何修改我的mapDispatchToProps以便按下按钮会发送一个名为TOGGLE_FILTER_TAG的动作？

===========编辑 - 解决方案============

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';


class FilterListingContainer extends Component {
    static propTypes = {
        Layout: PropTypes.func.isRequired,        
        tags: PropTypes.arrayOf(PropTypes.shape()).isRequired,        
    }

    render = () => {                
        const { Layout, tags } = this.props;        
        return (
          <Layout
            tags={tags}
            onStateChange={this.props.clickHandler} // clickHandler prop is defined in mapDispatchToProps
          />
        );
    }
}

const mapStateToProps = state => ({    
    tags: state.tagfilterreducer.tags || [],
});

function mapDispatchToProps(dispatch) {
    return {
        clickHandler: (newState, buttonId) => {                      
            dispatch({
                type: 'TOGGLE_FILTER_TAG',
                data: buttonId,
            })        
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FilterListingContainer);

Answer 1

首先需要安装redux绑定包，用于名为react-redux的反应然后你可以做类似

的事情

import { connect } from 'react-redux'
import { TOGGLE_FILTER_TAG } from 'youractions'

function mapDispatchToProps(dispatch) {
  return {
    clickHandler: () => {
      dispatch(TOGGLE_FILTER_TAG())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(yourcomponent)

clickHandler将在yourcomponent

中提供

Redux和React Native - 如何将回调连接到dispatch

1 个答案: