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

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

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

1 个答案: