React hook api 状态有时为空答案

【问题标题】：React hook api state is sometimes emptyReact hook api 状态有时为空
【发布时间】：2020-03-07 16:14:35
【问题描述】：

我正在使用 hook api 来管理状态，问题是处理函数中的状态有时为空。

我正在使用组件来管理 contenteditable（使用来自 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)

主要问题是handleKeyPress（输入按键后）内部是value（来自状态）空字符串，为什么？ - 在块console.log(value) // THERE IS A PROBLEM, VALUE IS SOMETIMES EMPTY, BUT I AM SURE THAT TEXT IS THERE!!! 我不明白出了什么问题？？

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

值为空，因为onChange实际上并没有改变它，也就是说

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

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

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

希望这会有所帮助。

【讨论】：