Question

我有一个按钮。当您单击按钮时，页面将下移至确切的坐标。如何在React.js上编写这样的JS代码？

div class="container">
<div class="down">
    <div class="down-text">DOWN
    <button onclick="topFunction2Section()" class="myBtn2" title="Down">&#10095;</button>
    </div>
</div>
</div>


<style>
    .container{
        background: yellow;
        height: 3000px;
        width: 100%;
    }
</style>


<script>
function topFunction2Section() {
           document.body.scrollTop = 940;
           document.documentElement.scrollTop = 940;
}
    </script>

Answer 1

您在很大程度上使用不使用React时的方式进行操作：只需通过运行该代码来响应按钮单击：

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.buttonClick = this.buttonClick.bind(this);
    }

    buttonClick() {
        document.body.scrollTop = 940;
        document.documentElement.scrollTop = 940;
    }

    render() {
        return (
            <button type="button" onClick={this.buttonClick} />
        );
    }
}

Answer 2

非常相似：

function MyComponent() {
    function topFunction2Section() {
           document.body.scrollTop = 940;
           document.documentElement.scrollTop = 940;
    }

    return <div className="down">
        <div className="down-text">DOWN
        <button onClick={topFunction2Section} className="myBtn2" title="Down">&#10095;</button>
        </div>
    </div>
}

请注意onClick大小写（大写C）。还请注意class属性在React中如何变成className。

如何编写在React.js上执行此功能的按钮？

2 个答案: