使用 react-redux 绑定事件处理程序道具

Question

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

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);

当前，每当单击事件发生时，this.props.handle_click 事件处理程序都会记录 undefined。如果我想访问this.props.foo，正确的做法是什么？我目前的实现是

<div onClick={this.props.handle_click.bind(this)}>

在render() 方法中，它按预期工作，但是根据linter，这看起来不是一个好习惯。更新容器（由connect 函数生成）后，以下代码似乎不起作用（由于某种原因，绑定重置为undefined）

constructor(props) {
    super(props);
    this.props.handle_click = this.props.handle_click.bind(this)
}

那么正确的方法是什么？还是我做错了整件事？

Answer 1

prop handle_click 只是一个通过引用传递给组件的函数，因此它对组件的范围（this）一无所知。您可以使用对所有函数都可用的 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>
        );
    }
}

为了优化这一点并防止你的 linter 抱怨，你可以像这样在构造函数中绑定它：

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>
        );
    }
}

所以你几乎是对的，但我不会修改构造函数中的道具，只是在类中添加另一个方法。