Question

我有节点列表，如果我点击其中一个节点，它应该将一个动作（例如changeName()）分派给Redux商店，因为我想在另一个组件中使用该节点的属性。

问题在于处理onClick()事件。如何强制委派？

interface NodeNode {
    id: string;
    Name: string;
    group: number;
}


    export class Nodes extends React.Component<{ nodes: NodeNode[], force: any}, {}>{

    componentDidMount() {
        const simulation = this.props.force;
        d3.selectAll(".node")
            .call(d3.drag()
                .on("start", onDragStart)
                .on("drag", onDrag)
                .on("end", onDragEnd));

    // onDragStart, onDrag, onDragEnd functions
      }

    render(){
        const nodes = this.props.nodes.map((node: NodeNode, index: number) => {
            return <NodeComponent key={index} node={node} onClick={this.handleClick.bind(this)} />;
            });

        return (
            <g className="nodes">
            {nodes}
            </g>
        );
    }

    private handleClick(d: any) {
        alert("clicked!"); // it's clicking but I don't wany to use that method, just dispatch below
    }
}
const mapDispatchToProps = (dispatch: any) => ({
    handleClick: () => dispatch(NodeStore.actionCreators.changeName())
});

export default connect(
    (state: ApplicationState) => state.node,
    mapDispatchToProps
);

我是前端的新手。

Answer 1

如果您需要在调用dispatch

之前更改结果，可以在Click处理程序中调用dispatch

private handleClick(d: any) {
    this.props.handleClick(d);
}

否则将渲染NodeCompenent渲染为

... onClick={this.props.handleClick.bind(this)}

我建议使用第一种方法，因为在这种情况下你可以将绑定移动到构造函数（不在渲染中使用.bind（））;

Answer 2

您可以将handleClick从类方法更改为属性，之后bind将是多余的。此外，我已将mapDispatchToProps符号从函数更改为对象（它不是必需的=）

interface NodeNode {
    id: string;
    Name: string;
    group: number;
}

export class Nodes extends React.Component<{ nodes: NodeNode[], force: any }, {}> {
    componentDidMount() {
        const simulation = this.props.force;
        d3.selectAll(".node")
            .call(d3.drag()
                .on("start", onDragStart)
                .on("drag", onDrag)
                .on("end", onDragEnd));

        // onDragStart, onDrag, onDragEnd functions
    }

    private handleClick = (d: any) => {
        // Do something and call this.props.handleClick method which you've passed with connect
        this.props.handleClick();
    }

    render() {
        const nodes = this.props.nodes.map((node: NodeNode, index: number) => {
            return <NodeComponent key={ index } node={ node } onClick={ this.handleClick } />;
        });

        return (
            <g className="nodes">
                { nodes }
            </g>
        );
    }
}

const mapDispatchToProps = {
    handleClick: NodeStore.actionCreators.changeName
};

export default connect(
    (state: ApplicationState) => state.node,
    mapDispatchToProps
);

Answer 3

你可以在任何地方调用handleClick dispatch动作，因为你在mapDispatchToProps中映射它。

class Widget(QtWidgets.QWidget):
    def __init__(self, *args, **kwargs):
        [...]
        self.view.horizontalHeader().setSectionsMovable(True)

        self.view.selectionModel().selectionChanged.connect(self.on_selectionChanged)
        self.currentSelected = []

    def on_selectionChanged(self, selected, deselected):
        for ix in selected.indexes():
           if ix not in self.currentSelected:
            self.currentSelected.append(ix)
        for ix in deselected.indexes():
            if ix in self.currentSelected:
                self.currentSelected.remove(ix)

    def on_data_changed(self, _from, _to):
        model = _from.model() # proxy model
        model.blockSignals(True)
        pindexes = [QtCore.QPersistentModelIndex(ix) for ix in self.currentSelected]
        for index in pindexes:
            model.setData(index, _from.data())
        model.blockSignals(False)

取代

 this.props.handleClick();

将handleClick（）发送到redux商店

3 个答案: