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(Enter キーを押した後) が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 || '';

この行は、想定されていることを行いません。targetの代わりに、react の合成イベントの propを読むべきだと思いますcurrentTarget。だから、代わりにこれを試してください

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

お役に立てれば。

于 2020-03-07T16:35:34.910 に答える