Реагирует состояние API-интерфейса ловушки иногда пусто - PullRequest
Новая
       6

Реагирует состояние API-интерфейса ловушки иногда пусто

0 голосов
/ 07 марта 2020

Я использую hook api для управления состоянием, проблема в том, что состояние иногда пусто в функции обработчика.

Я использую компонент для управления contenteditable (используя из npm) lib. Вы можете написать в компонент, а при вводе вы можете отправить событие в родительский.

См. Мой пример: 

import React, { useState } from "react"
import css from './text-area.scss'
import ContentEditable from 'react-contenteditable'
import { safeSanitaze } from './text-area-utils'

type Props = {
    onSubmit: (value: string) => void,
}

const TextArea = ({ onSubmit }: Props) => {
    const [isFocused, setFocused] = useState(false);
    const [value, setValue] = useState('')

    const handleChange = (event: React.FormEvent<HTMLDivElement>) => {
        const newValue = event?.currentTarget?.textContent || '';
        setValue(safeSanitaze(newValue))
    }

    const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
        // enter
        const code = event.which || event.keyCode
        if (code === 13) {
            console.log(value) // THERE IS A PROBLEM, VALUE IS SOMETIMES EMPTY, BUT I AM SURE THAT TEXT IS THERE!!!
            onSubmit(safeSanitaze(event.currentTarget.innerHTML))
            setValue('')
        }
    }

    const showPlaceHolder = !isFocused && value.length === 0

    const cls = [css.textArea]
    if (!isFocused) cls.push(css.notFocused)

    console.log(value) // value is not empty

    return (
        <ContentEditable
            html={showPlaceHolder ? 'Join the discussion…' : value}
            onChange={handleChange}
            className={cls.join(' ')}
            onClick={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            onKeyPress={handleKeyPress}
        />
    )
}

export default React.memo(TextArea)

Основная проблема заключается в том, что внутри handleKeyPress (после нажатия клавиши Enter) value (из состояния) пустая строка, почему? - в блоке console.log(value) // THERE IS A PROBLEM, VALUE IS SOMETIMES EMPTY, BUT I AM SURE THAT TEXT IS THERE!!! я не понимаю, что не так ??

1 Ответ

0 голосов
/ 07 марта 2020

Значение пустое, потому что onChange на самом деле не меняет его, что означает

const newValue = event?.currentTarget?.textContent || '';

эта строка не делает то, что должна. Я думаю, что вы должны прочитать target опору в syntheti c events реакции вместо currentTarget. Поэтому попробуйте вместо этого

const newValue = event.target?.value || '';

Надеюсь, это поможет.

...