我的问题：

Question

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

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

我的组件类似于：


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

所以这可行...如果我在Moby Dick的第20页上有一个书签，我可以转到/books/mobydick/id/20，表单将在输入框中以20开头，并且它将导航我我想要的任何地方（我已经排除了边界检查的代码）。

我的问题：

每更改一次输入，都会渲染一次。如果我擦除20并放入19，然后按Enter，则渲染6个。
Initial，20->2，2->0，0->1，1->19，render new page
这是因为我的状态正在更新每次。.
这是唯一可以弄清楚如何在页面加载时从当前页码开始并对其进行编辑的唯一方法...其他尝试不会让我更新如果我从一个开始就很有价值。

我该如何解决？
我认为我正在寻找的是React.createRef（）但我尝试了以下方法：
添加 value={currentPageId}和ref={inputElement}到表单
添加 const inputElement = React.createRef()到组件顶部
删除状态变量currentPage
编辑 handlePageInput如下：

const handlePageInput = (e) => {
        if (e.keyCode === ENTER) {
            e.preventDefault()
            history.push({
                pathname: `/books/${bookTitle}/id/${items[inputElement.current.value - 1].id}`
            })
        } else {
            inputElement.current.value = e.target.value
        }
    }

但是它不会让我擦除输入框的值...在输入框中上下单击也不会执行任何操作。如果我在第200页上输入，则无法将其更改为其他任何页面。

使用此方法
，如果我删除了value={currentPageId}并保留了不形式的值属性，

将我的history.push pathname更新为.../id/${items[inputElement.current.valueAsNumber - 1].id}

我可以输入所需的任何页面，并可以正确导航...我的问题是，当我进入页面时，输入框中没有任何内容可以开始...这就是我用{ {1}}首先...

我想念什么？

Answer 1

您可以将Uncontrolled Component与default value一起尝试

从输入中删除onChange并保留onKeyDown。在您的handlePageInput函数内部，从引用中获取当前值。

类似这样的东西：

Id

对我的表单的value属性的反应引用未更新

我的问题：

1 个答案: