Reactjs 使div可编辑，并将值捕获到表单中，就像它是textarea一样

我只是在挑战我在反应方面的新技能，并且遇到了一些问题。
我正在尝试使div可编辑以替换表单中的textarea。我在尝试捕获键入的数据时会遇到问题

import React, { useState } from "react";

function CreateNotes(params) {

    const [note, setNote] = useState({
        title: "",
        content: ""
    });

    function handleChange(event) {

        const {name, value} = event.target;

        setNote(prevValue => {
            return ({
                ...prevValue,
                [name]: value
            })
        })
    }

    return <div>
        <form action="">
            <input 
            name="title"
            type="text"
            placeholder="Titre"
            value={note.title}
            onChange={handleChange}
            />
            <div
            onTextArea="true"
            name="content"
            contentEditable="true"
            ariaMultiline="true"
            ariaLabel="Take a note"
            value={note.content}
            onClick={handleChange}
            ></div>
        </form>
    </div>
}


export default CreateNotes;

import React，{useState}来自“React”；
函数CreateNotes（参数）{
const[note，setNote]=useState({
标题：“，
内容：“”
});
函数句柄更改（事件）{
常量{name，value}=event.target；
setNote（prevValue=>{
返回({
…价值，
[名称]：值
})
})
}
返回
}
导出默认的CreateNotes；

---

即使键入了某些内容，div也会变成未定义的。

我建议使用预构建的插件。我发现自己正试图做你正在做的事情，这个插件执行得非常好。如果你想为了学习而理解源代码，你可以学习它。

。。。为什么？使用表单元素有什么不对？嗨，Mike，我希望在键入时显示所有内容，而不需要滚动，这在使用textarea的长文本中会发生