React控制的文字输入不允许输入多个字符

时间:2019-12-18 09:35:53

标签: reactjs react-hooks

在我的React表分页代码中,有一个输出页码以及用于显示和设置当前页面的输入。

    const pageNumbers = [];
    if (size) {
        for (let i = 1; i <= Math.ceil(size / resultsPerPage); i++) {
            pageNumbers.push(i);
        }

        renderPageNumbers = pageNumbers.map(number => {
            if (number === 1 || number === Math.ceil(size / resultsPerPage) || (number >= Number(currentPage) - 2 && number <= Number(currentPage) + 2)) {
                if (number !== Number(currentPage)) {
                    return (
                        <span className={number === Number(currentPage) ? 'pagination-item--active' : 'pagination-item'} key={number} onClick={() => {
                            if (Math.ceil(size / resultsPerPage) > 1 && number !== Number(currentPage)) {
                                setCurrentPage(number);
                            }
                        }}>
                            {number}
                        </span> 
                    )
                } else {
                    return (
                        <input type='text'
                            value={currentPage}
                            onChange={(evt) => {
                                if (Number(evt.target.value) > 0 && Math.ceil(size / resultsPerPage) >= Number(evt.target.value)) {
                                    setCurrentPage(evt.target.value);
                                }
                            }}
                        />
                    )
                }
            } else {
                return null;
            }   
        });
  }

该输入允许在其中粘贴任何长度的数字,或从粘贴的数字中删除单个字符,但不允许输入多个字符。这是为什么? if (size) {...}条件工作之外几乎相同的代码好:

{Math.ceil(size / resultsPerPage) > 1 &&
        <input
            className='table-pagination-container__goto-input'
            type='text'
            value={currentPage}
            onChange={(evt) => {
                if (Number(evt.target.value) > 0 && Math.ceil(size / resultsPerPage) >= evt.target.value) {
                    setCurrentPage(evt.target.value);
                }
            }}
        />
}

完整的组件代码在https://github.com/ElAnonimo/job-fullstack/blob/master/client/src/components/Records.js上。对未清理的代码表示歉意。

0 个答案:

没有答案