时间戳

首页 > 解决方案 > 使 div 可编辑并以表单形式捕获值，就好像它是文本区域一样

reactjs - 使 div 可编辑并以表单形式捕获值，就好像它是文本区域一样

问题描述

我只是在挑战我的新反应技能并遇到一些问题。
我正在尝试使 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;

即使输入了某些内容，div 也会变为未定义。

标签： reactjs

解决方案

我建议使用预先构建的插件react-contenteditable。我发现自己正在尝试完全按照您的方式做，并且这个插件执行得非常好。如果您为了学习而想理解它，可以研究源代码。

推荐阅读