小编use*_*382的帖子

我第一次搞乱React.js,无法通过点击事件找到在页面上显示或隐藏某些内容的方法.我没有加载任何其他库到页面,所以我正在寻找一些使用React库的本地方式.这就是我到目前为止所拥有的.我想在点击事件触发时显示结果div.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

我需要帮助一个在用户空闲时触发的模态.它运行良好,直到我在运行NVDA的Firefox上进行测试.使用箭头键时以及在移动设备上滑动时会出现焦点问题.当模态出现并且用户使用箭头或滑动时,如果我等待点击它,焦点将在几秒后从"是"按钮反弹到标题.我已经装了工作示例:https://jsfiddle.net/ncanqaam/

我将空闲时间段更改为一分钟,并删除了调用服务器以扩展用户会话的部分.

var state ="L";
var timeoutPeriod = 540000;
var oneMinute = 60000;
var sevenMinutes = 60000;

var lastActivity = new Date();

function getIdleTime() {
    return new Date().getTime() - lastActivity.getTime();
}

//Add Movement Detection
function addMovementListener() {
    $(document).on('mousemove',  onMovementHandler);
    $(document).on('keypress',  onMovementHandler);
    $(document).on('touchstart touchend',  onMovementHandler);
}
//Remove Movement Detection
function removeMovementListener() {
    $(document).off('mousemove', onMovementHandler);
    $(document).off('keypress',  onMovementHandler);
    $(document).off('touchstart touchend',  onMovementHandler);
}

//Create Movement Handler
function onMovementHandler(ev) {
    lastActivity = new Date();
    console.log("Something moved, idle time = " + lastActivity.getTime());
}

function …

我正在开发一种模式，该模式将提醒用户由于空闲时间而等待注销。总的来说，它有效，但我注意到计时器并不是 100% 准确。我知道 setInterval 和准确性存在问题。我仍然看到差异，并且欢迎提出有关如何改进我的代码的建议。

var sessionTimeoutPeriod = 240;
var state = "L";
var timeoutPeriod = sessionTimeoutPeriod * 1000;
var logout = Math.floor(timeoutPeriod / 60000);
var idleInterval;

if (state == "L" || state == "O" || state == "C") {
var idleTime = 0;

$(document).ready(function() {
    //Zero the idle timer on mouse movement.
    $(this).mousemove(function(e) {
        idleTime = 0;
        console.log("The mouse moved, idle time = " + idleTime);
    });
    $(this).keypress(function(e) {
        idleTime = 0;
        console.log("A key was pressed, idle time = …