Javascript 对我的表格作出反应'；s值属性未更新

首先，我想说我有一个解决方案，但这似乎很荒谬，必须有更好的方法。因此，我将从我荒谬的解决方案开始

我有一个表格显示我在哪一页。我希望用户能够输入一个页面，并在enter键上转到该页面

我的组件看起来像：

const BookPagination = (props) => {

    const history = useHistory()
    const { items, bookTitle, currentPageId } = props
    const [currentPage, setCurrentPage] = useState(currentPageId)
    const totalPages = items.length
    const ENTER = 13

    // items is just a bunch of arrays with info about each page (each of which have an id)

    const handlePageInput = (e) => {
        if (e.keyCode === ENTER) {
            e.preventDefault()
            history.push({
                pathname: `/books/${bookTitle}/id/${items[currentPage - 1].id}` //page id's start @ 1
            })
        } else {
            setCurrentPage(e.target.value)
        }
    }

    return (
        <div className={'.pageSelector'}>
            <span>
                <input type="number"
                    min="1"
                    max={totalPages}
                    value={currentPage}
                    onKeyDown={handlePageInput}
                    onChange={handlePageInput}
                />
                of {totalPages}
            </span>
        </div>
    )
}

export default BookPagination

但它不会让我删除输入框的值。。。在输入框中上下单击也不会做任何事情。如果我在第200页输入，我不能将其更改为任何其他页面

使用此方法，
如果我删除

value={currentPageId}

并使表单没有value属性

• 正在更新我的

  history.push路径名

  到

  ../id/${items[inputElement.current.valueAsNumber-1].id}

我可以进入任何我想要的页面，并正确导航。。。我的问题是当我进入一个页面时，输入框中没有任何东西可以启动。。。这就是我如何首先用

useState（）

更新它的原因

我缺少什么？

你可以用

从输入中删除onChange并保留onKeyDown。在handlePageInput函数中，从ref获取当前值

大概是这样的：

const BookPagination = (props) => {

const history = useHistory()
const { items, bookTitle, currentPageId } = props
const totalPages = items.length
const ENTER = 13
const inputElement = useRef(null);
// items is just a bunch of arrays with info about each page (each of which have an id)

const handlePageInput = (e) => {
    if (e.keyCode === ENTER) {
        e.preventDefault()
        const currentValue = inputElement.current.value;
        history.push({
            pathname: `/books/${bookTitle}/id/${items[currentValue - 1].id}` //page id's start @ 1
        })
    }
}

return (
    <div className={'.pageSelector'}>
        <span>
            <input type="number"
                ref={inputElement}
                min="1"
                max={totalPages}
                defaltValue={currentPageId}
                onKeyDown={handlePageInput}
            />
            of {totalPages}
        </span>
    </div>
)
}

export default BookPagination

constbookpagination=（道具）=>{
const history=useHistory（）
const{items，bookTitle，currentPageId}=props
const totalPages=items.length
常数ENTER=13
常量inputElement=useRef（null）；
//items只是一组数组，其中包含关于每个页面的信息（每个页面都有一个id）
常量handlePageInput=（e）=>{
如果（e.keyCode===输入）{
e、 预防默认值（）
const currentValue=inputElement.current.value；
历史推送({
路径名：`/books/${bookTitle}/id/${items[currentValue-1].id}`//页面id的开始@1
})
}
}
返回(
共{totalPages}
)
}
导出默认书籍分页

所以我被

else{setCurrentPage（e.target.value）}

弄糊涂了。这应该从你的答案中删除吗？我也有按钮，让我前进/后退一页，当我这样做时，输入bo中的数字不会更新，即使currentPageId被更新。。。为了澄清，当我将inputElement登录到控制台时。。defaultValue将继续更新，但无论我从哪个页面开始，都会保留“valueAsNumber”的值，这很有趣..抱歉。是的，那应该被移除。当前页面不再存储为状态值。只要将其保持为statefull值，组件将在每次更新时呈现。考虑创建一个代码框来演示问题以获得更好的帮助。

const BookPagination = (props) => {

const history = useHistory()
const { items, bookTitle, currentPageId } = props
const totalPages = items.length
const ENTER = 13
const inputElement = useRef(null);
// items is just a bunch of arrays with info about each page (each of which have an id)

const handlePageInput = (e) => {
    if (e.keyCode === ENTER) {
        e.preventDefault()
        const currentValue = inputElement.current.value;
        history.push({
            pathname: `/books/${bookTitle}/id/${items[currentValue - 1].id}` //page id's start @ 1
        })
    }
}

return (
    <div className={'.pageSelector'}>
        <span>
            <input type="number"
                ref={inputElement}
                min="1"
                max={totalPages}
                defaltValue={currentPageId}
                onKeyDown={handlePageInput}
            />
            of {totalPages}
        </span>
    </div>
)
}

export default BookPagination