0

我正在使用钩子 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（输入按键后）是value（来自状态）空字符串，为什么？- 在块中console.log(value) // THERE IS A PROBLEM, VALUE IS SOMETIMES EMPTY, BUT I AM SURE THAT TEXT IS THERE!!!我不明白出了什么问题？

4

1 回答 1

0

该值为空，因为onChange实际上并没有改变它，这意味着

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

这条线没有做它应该做的事情。我认为您应该阅读targetreact 合成事件中的道具，而不是currentTarget. 所以，试试这个

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

希望这可以帮助。

于 2020-03-07T16:35:34.910 回答