在 reactJS 中添加一个 onClick 按钮

Question

朋友们好

我目前正在制作一个着陆页。该功能在 reactJS 中得到处理（我相对不熟悉）。我无法将 onClick 添加到按钮以将我带到项目的下一页。

这是我的 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'));

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

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

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

然后我尝试将 onClick 添加到函数 FancyButton 并尝试添加对我想要访问的页面的引用。都没有用

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

最后一段代码使包含我的着陆页的页面转到我想通过着陆页上的按钮转到的页面。

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

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

有人能解答我的问题吗？

---

---

编辑

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

return React.createElement(
                'div',
                { className: 'fancy-button',
                    style: buttonStyle,
                    onClick: () => window.location.href = "index2.html",
                    ref: 'fancyButton' },

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