时间戳

首页 > 解决方案 > 单击reactjs中的addbtn时如何清除textarea的值？

reactjs - 单击reactjs中的addbtn时如何清除textarea的值？

问题描述

我使用了以下代码，但是单击 addbtn 时文本不清晰。这是一个 reactjs 项目。

function Addpage() {

    const[note, setnote] = useState("");
    function textchange(e) {
        setnote(e.target.value);
        console.log(note);
    };
    
        function savenote(){
        localStorage.setItem('savednotes', note);
        setnote("");
    };

    return (
        <>
        <Headersmall/>
        <br/>
        <div className="addcard">
            <h1>Add new note.</h1>
            <div className="title">
                <input type="text" className="titlebox" id="addtitle" placeholder="Title"/>
            </div>
            <br/>
            <div className="note">
                <textarea type="text" className="notebox" id="addtxt" placeholder="Note" onChange = {textchange}/>
            </div>
            <br/>
            <button className="addbtn" id='addbtn' onClick = {savenote}>Save</button>
        </div>
        <br/>
        </>
    )
}

标签： reactjs

解决方案

当您通过setnote("")内部savenote()函数将 note 的值设置为空字符串时，您正在更改 state 变量的值note，但它不会反映在 textarea 中，因为您的 textarea 输入没有与之关联的值. 尝试添加value={note}这意味着 textarea 和“note”状态变量之间将存在“设置和获取”关系

<textarea
 value={note}
 type="text"
 className="notebox"
 id="addtxt"
 placeholder="Note"
 onChange={textchange}
>

推荐阅读