Question

嗨朋友

我目前正在着陆页面上工作。在reactJS（我相对不喜欢）中处理了这个功能。我无法在按钮上添加onClick，以便将我带到项目的下一页。

这是我的JS

FALSE

到目前为止，我已经尝试在我的html中添加一个A标记，并在我的JS中进一步引用它

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var FancyButton = function (_React$Component) {
    _inherits(FancyButton, _React$Component);

    function FancyButton() {
        _classCallCheck(this, FancyButton);

        return _possibleConstructorReturn(this, (FancyButton.__proto__ || Object.getPrototypeOf(FancyButton)).apply(this, arguments));
    }

    _createClass(FancyButton, [{
        key: 'render',
        value: function render() {
            // Mask id and styling
            // need unique id's for multiple buttons
            var maskId = 'mask_1';
            var maskStyle = '#fancy-masked-element_' + maskId + ' { mask: url(#' + maskId + '); -webkit-mask: url(#' + maskId + ')}';

            var buttonStyle = {
                width: this.props.width,
                height: this.props.height
            };

            var fancyFrontStyle = {
                transform: 'rotateX(0deg) translateZ(' + this.props.height / 2 + 'px )'
            };

            var fancyBackStyle = {
                transform: 'rotateX(90deg) translateZ( ' + this.props.height / 2 + 'px )'
            };



            // SVG attributes
            var textTransform = 'matrix(1 0 0 1 ' + this.props.width / 2 + ' ' + this.props.height / 1.6 + ')';
            var viewBox = '0 0 ' + this.props.width + ' ' + this.props.height;

            return React.createElement(
                'div',
                { className: 'fancy-button',
                    style: buttonStyle,
                    ref: 'fancyButton' },
                React.createElement(
                    'div',
                    { className: 'fancy-flipper' },
                    React.createElement(
                        'div',
                        { className: 'fancy-front', style: fancyFrontStyle },
                        React.createElement(
                            'svg',
                            {
                                height: this.props.height,
                                width: this.props.width,
                                viewBox: viewBox },
                            React.createElement(
                                'defs',
                                null,
                                React.createElement(
                                    'mask',
                                    { id: maskId },
                                    React.createElement('rect', { width: '100%', height: '100%', fill: '#FFFFFF' }),
                                    React.createElement(
                                        'text',
                                        { className: 'mask-text button-text', fill: '#000000', transform: textTransform, fontFamily: '\'intro_regular\'', fontSize: this.props.fontSize, width: '100%', textAnchor: 'middle', letterSpacing: '1' },
                                        this.props.buttonText
                                    )
                                )
                            ),
                            React.createElement(
                                'style',
                                null,
                                maskStyle
                            ),
                            React.createElement('rect', { id: 'fancy-masked-element_' + maskId, fill: this.props.color, width: '100%', height: '100%' })
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'fancy-back', style: fancyBackStyle },
                        React.createElement(
                            'svg',
                            {
                                height: this.props.height,
                                width: this.props.width,
                                viewBox: viewBox },
                            React.createElement('rect', { stroke: this.props.color,
                                strokeWidth: this.props.borderWidth,
                                fill: 'transparent',
                                width: '100%',
                                height: '100%' }),
                            React.createElement(
                                'text',
                                { className: 'button-text', transform: textTransform, fill: this.props.color, fontFamily: '\'intro_regular\'', fontSize: this.props.fontSize, textAnchor: 'middle', letterSpacing: '1' },
                                this.props.buttonText,

                            )
                        )
                    )
                )
            );
        }
    }]);

    return FancyButton;
}(React.Component);

FancyButton.defaultProps = {
    color: '#FFFFFF',
    width: 410,
    height: 100,
    fontSize: 42,
    borderWidth: 15,
    buttonText: 'MYSTUDY'

};

React.render(React.createElement(FancyButton, null), document.getElementById('app'));

这也不起作用，可能是因为它是普通的Js，我意识到我创建的功能并没有引用我需要的按钮。

然后我尝试将onClick添加到函数FancyButton中，我也尝试添加对我想要访问的页面的引用。没有工作

function App() {
    {
      window.location.href = "homepageDEMO.php";
    }
}

最后一段代码使我登录页面的页面转到我想要使用登录页面上的按钮转到的页面。

    function FancyButton() {
    _classCallCheck(this, FancyButton);
        {
      window.location.href = "index2.html";
    }
    return _possibleConstructorReturn(this, (FancyButton.__proto__ || Object.getPrototypeOf(FancyButton)).apply(this, arguments));
}

任何人都能解决我的问题吗？

修改

在评论的帮助下，我找到了解决方案。我将onclick语法添加到花式按钮类中，它就像一个魅力。谢谢大家

function FancyButton() {
        _classCallCheck(this, FancyButton);

        return _possibleConstructorReturn("webApp.php", (FancyButton.__proto__ || Object.getPrototypeOf(FancyButton)).apply(this, arguments));
    }

Answer 1

您使用React.createElement（component，props，... children）您只需使用onClick属性将重定向功能添加到道具，它应该如下所示：

createReactClass({
    redirect: function() {
        window.location.href = "index2.html";
    }
    render: function() {
        ReactDOM.render(
            React.createElement(div,
                { ...otherProps, onClick: this.redirect },
                null)
            );
    }
});

将onClick按钮添加到reactJS中

修改

1 个答案: