Реактивная ссылка на атрибут значения моей формы не обновляется - PullRequest
Новая
       5

Реактивная ссылка на атрибут значения моей формы не обновляется

0 голосов
/ 08 ноября 2019

Сначала я хотел бы сказать, что у меня есть решение, но оно кажется нелепым и должен быть лучший способ. Так что я начну с моего нелепого решения.

У меня есть форма, которая показывает, на какой странице я нахожусь. Я хочу, чтобы пользователь мог войти на страницу и перейти на эту страницу при входе.

Мой компонент выглядит примерно так: 


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

Так что это работает ... Если у меня есть закладка на странице 20 Моби Дика, я могу перейти к /books/mobydick/id/20, и форма будет начинаться с 20 в поле ввода и будет перемещать меня куда угодно (я исключил код для проверки границ).

Моя проблема:

Эта вещь отображается каждый раз, когда я изменяю ввод. Если я стираю 20, вставляю 19 и нажимаю ввод ... это 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}

Я могу войти на любую страницу и перейти по ней правильно ... моя проблема в том, что когда я захожу на страницу, в поле ввода ничего не запускается ... именно так я и обновлял ее с помощью useState(), во-первых ...

Чего мне не хватает?

1 Ответ

0 голосов
/ 08 ноября 2019

Вы можете попробовать Неконтролируемый компонент со значением по умолчанию

Удалите onChange из вашего ввода и оставьте onKeyDown. Внутри функции handlePageInput получите текущее значение из ссылки.

Примерно так: 

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
...