Javascript 使用react-redux绑定事件处理程序prop

将事件处理程序从容器声明到演示小部件的正确方法是什么，以便我可以访问事件处理程序函数中的其他道具

class ApplicationWidget extends Component {
    componentDidMount() {
        this.props.handle_onload.call(this);
    }

    render() {
        return (
            <div onClick={this.props.handle_click}>
                <Header />
                <Content />
            </div>
        );
    }
}

export default connect(
    state => {
        return {foo: state.foo};
    },
    dispatch => {
        return {
            handle_click() {
                console.log(this)
            },
            handle_onload() {
                jQuery.get({
                    accepts: 'application/json',
                    success: (data) => dispatch(the_action_creator(data)),
                    url: `/initialize`
                });
            }
        };
    }
)(ApplicationWidget);

在

render（）

方法中，它可以按预期的方式工作，但是根据的，这看起来不是一个好的做法。更新容器（由

connect

函数生成）后，以下代码似乎不起作用（由于某种原因，绑定被重置为

undefined

）

---

那么，正确的方法是什么呢？还是我做的整个事情都错了？

道具

句柄\u单击

只是一个通过引用传递给组件的函数，因此它不“知道”组件的作用域（这个）。您可以使用对所有函数都可用的bind方法来更改，如下所示：

class ApplicationWidget extends Component {
    componentDidMount() {
        this.props.handle_onload.call(this);
    }

    render() {
        return (
            <div onClick={this.props.handle_click.bind(this)}>
                <Header />
                <Content />
            </div>
        );
    }
}

class ApplicationWidget extends Component {
    constructor(props) {
        super(props);
        this.handle_click = props.handle_click.bind(this);
    }

    componentDidMount() {
        this.props.handle_onload.call(this);
    }

    render() {
        return (
            <div onClick={this.handle_click}>
                <Header />
                <Content />
            </div>
        );
    }
}

class ApplicationWidget扩展组件{
componentDidMount（）{
this.props.handle\u onload.call（this）；
}
render（）{
返回(
);
}
}

要对此进行优化并防止linter抱怨，您可以在构造函数中绑定它，如下所示：

class ApplicationWidget extends Component {
    componentDidMount() {
        this.props.handle_onload.call(this);
    }

    render() {
        return (
            <div onClick={this.props.handle_click.bind(this)}>
                <Header />
                <Content />
            </div>
        );
    }
}

class ApplicationWidget extends Component {
    constructor(props) {
        super(props);
        this.handle_click = props.handle_click.bind(this);
    }

    componentDidMount() {
        this.props.handle_onload.call(this);
    }

    render() {
        return (
            <div onClick={this.handle_click}>
                <Header />
                <Content />
            </div>
        );
    }
}

class ApplicationWidget扩展组件{
建造师（道具）{
超级（道具）；
this.handle\u click=props.handle\u click.bind（this）；
}
componentDidMount（）{
this.props.handle\u onload.call（this）；
}
render（）{
返回(
);
}
}

---

因此，您几乎完全正确，但我不会修改构造函数中的道具，只会向类中添加另一个方法。

我知道，因此我正在寻找正确的方法（：它与您的Redux设置一起工作吗？我只使用了一个简单的组件进行了测试