Reactjs React hook api状态有时为空

我使用钩子api来管理状态，问题是处理程序函数中的状态有时是空的

我正在使用组件管理

内容可编辑
（从npm使用）库。您可以写入组件，并在输入时将事件发送给父级

参见我的示例：

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)

import React，{useState}来自“React”
从“./text area.scss”导入css
从“react ContentEditable”导入ContentEditable
从“./text area utils”导入{safeSanitaze}
类型道具={
onSubmit：（值：字符串）=>void，
}
const TextArea=（{onSubmit}:Props）=>{
const[isFocused，setFocused]=useState（false）；
const[value，setValue]=useState（“”）
常量handleChange=（事件：React.FormEvent）=>{
const newValue=event？.currentTarget？.textContent | |“”；
设置值（安全卫生（新值））
}
const handleKeyPress=（事件：React.KeyboardEvent）=>{
//进入
常量代码=event.which | | event.keyCode
如果（代码===13）{
console.log（value）//有一个问题，值有时是空的，但我确信文本在那里！！！
onSubmit（safeSanitaze（event.currentTarget.innerHTML））
设置值（“”）
}
}
常量showPlaceHolder=！isFocused&&value.length==0
const cls=[css.textArea]
如果（！isFocused）cls.push（css.notFocused）
console.log（value）//值不为空
返回(
setFocused（true）}
onBlur={（）=>setFocused（false）}
onKeyPress={handleKeyPress}
/>
)
}
导出默认的React.memo（TextArea）

主要问题是
handleKeyPress
（输入keypress后）中的
值
（从状态）为空字符串，为什么？-在block
console.log（value）//中有一个问题，值有时是空的，但我确信文本在那里我不明白怎么了
 该值为空，因为
onChange
实际上不会更改它，这意味着

const newValue=event？.currentTarget？.textContent | |“”

这条线做不到它应该做的。我认为您应该阅读react的合成事件中的
target
属性，而不是
currentTarget
。所以，试试这个

const newValue=event.target？.value | |“”

希望这有帮助