javascript - Mixin 函数仅在 render() 中工作

Question

出于某种原因，我的代码中的 mixin 函数似乎只能在 render() 函数中正常工作。可能是我没有在 render() 之外以正确的方式调用它们，但不应该是完全相同的方式吗？

这样一切工作正常(但我不能坚持这样做，因为我必须添加一些额外的东西来点击处理，同时不改变 mixin):

var Row = React.createClass({
    mixins: [someMixin]
    },

    render: function () {
        var clickHandler = null;
        var btn = null;

        if (firstCase) {
            clickHandler = this.order(this.props.name, this.props.else);
            btn = (<a href="" onClick={clickHandler}>Order</a>);
        } else if (secondCase) {
            clickHandler = this.noOrder(this.props.name, this.props.else);
            btn = (<a href="" onClick={clickHandler}>No order</a>);
        }
        return (
            <div>
                {btn}
            </div>
        );
    }
});

但是当我做了显而易见的事情并将 mixin 函数包含在另一个函数中来处理点击时 - 像这样 - 一切都会失败，甚至“测试”也没有打印在控制台中:

var Row = React.createClass({
    mixins: [someMixin]
    },

    handleOrderClick(type) {
        console.log('test');
        if (type == 'order') {
            this.order(this.props.name, this.props.else);
        } else if (type == 'no-order') {
            this.noOrder(this.props.name, this.props.else);
        }
    },

    render: function () {
        var clickHandler = null;
        var btn = null;

        if (firstCase) {
            clickHandler = this.handleOrderClick('order');
            btn = (<a href="" onClick={clickHandler}>Order</a>);
        } else if (secondCase) {
            clickHandler = this.handleOrderClick('no-order');
            btn = (<a href="" onClick={clickHandler}>No order</a>);
        }
        return (
            <div>
                {btn}
            </div>
        );
    }
});

编辑:order 和 noOrder 函数如下所示:

order: function (name, else) {
    return function (event) {
        event.preventDefault();

        var term = name + '&&¤%' + else;
        Order.order(name, else, period, function (data) {

            if (term === (global || window).MAIN_NAME + '.' + (global || window).MAIN) {
                $(window).trigger('Name:update');
            }
        }.bind(this));
    }.bind(this);
},

noOrder: function (name, else) {
    return function (event) {
        event.preventDefault();

        if (!this.state.transferModalOpen) {
            this.toggleTransferModal();
        }
    }.bind(this);
}

Answer 1

为了在 handleOrderClick 中使用 this.setState，您必须在渲染方法中使用 bind 方法。因此 handleOrderClick 将变为:

handleOrderClick(type, event) {
    this.setState({foo: 'bar'});
    if (type == 'order') {
        this.order(this.props.name, this.props.else)(event);
    } else if (type == 'no-order') {
        this.noOrder(this.props.name, this.props.else)(event);
    }
},

你的渲染方法变成:

render: function () {
    var clickHandler = null;
    var btn = null;

    if (firstCase) {
        clickHandler = this.handleOrderClick.bind(this, 'order');
        btn = (<a href="" onClick={clickHandler}>Order</a>);
    } else if (secondCase) {
        clickHandler = this.handleOrderClick(this, 'no-order');
        btn = (<a href="" onClick={clickHandler}>No order</a>);
    }
    return (
        <div>
            {btn}
        </div>
    );
}

您会注意到 this.order 和 this.noOrder 返回的函数不再由 handleOrderClick 返回，而是而是立即执行。这应该会提供您想要的效果。

我已将示例中的代码放入 jsfiddle 中现在似乎工作正常。我必须将“else”属性更改为“alt”，因为“else”是保留字。为了简单起见，我还直接将 mixin 应用于该类。我简化了 order 和 noOrder 函数，因为我无权访问 Order 对象，我们只对它们在正确的时间。我还添加了第二个按钮，您可以单击它来翻转大小写，以便渲染另一个按钮，从而导致组件再次渲染。我添加了一个标签，用于显示上次按下按钮时调用了哪个函数。

作为引用，您可以找到有关bind方法的更多信息here .

希望对您有帮助^_^