Textarea 不允许我写入它 [React]答案

【问题标题】：Textarea wont allow me to write into it [React]Textarea 不允许我写入它 [React]
【发布时间】：2022-11-18 06:03:04
【问题描述】：

我正在制作一个具有反应的网络应用程序，在我的一个功能中，我从后端获取一些数据，然后通过更改文本区域的值将其显示给用户。问题是，当用户按下按钮从后端获取数据时，我希望文本区域不被编辑，但是如果我单击文本区域，我希望它删除获取的数据并允许用户写入自身。

这是代码在包含文本区域的组件中的样子：

<div id="text-div" onClick={this.onWrite}>
    <textarea id="text" rows={13} value={this.state.value} onChange={this.handleChange}></textarea></div>
<Button onClick={this.handleRead}>Read</Button>

//functions within the code
onWrite() {
    // do stuff
    document.getElementById("text").setAttribute("contentEditable", true);
}

async handleRead() {
    // fetches data and saves it into this.state.value
    document.getElementById("text").setAttribute("contentEditable", false);
}

我也尝试过使用readOnly，但它也不起作用，当我调用handleRead()时，它不会让用户写入和显示数据（如预期的那样），但是当我调用onWrite()时（它会设置只读属性为 false）它不允许用户写入。所以我无法恢复handleRead()所做的。

我真的很感激一些建议，因为我是 React 的菜鸟，这是我的第一个项目，如果我错过了什么，抱歉。

【问题讨论】：

标签： javascript html reactjs textarea

【解决方案1】：

contenteditable 是添加到不可编辑字段（如 div）以使其可编辑的属性

你想使用readonly或disabled

我将您的示例转换为原版以使其可在此处使用

function onWrite() {
  // do stuff
  document.getElementById("text").removeAttribute("readonly");
}

async function handleRead() {
  document.getElementById("text").value = 'test'
  document.getElementById("text").setAttribute("readonly", true)
}

<div id="text-div" onclick="onWrite()">
  <textarea id="text" rows="13"></textarea>
</div>
<button onclick="handleRead()">Read</button>

【讨论】：

【解决方案2】：

这可能是因为您已经为输入字段分配了一些值。所以使用defaultValue而不是value 所以试着像这样写你的代码

<div id="text-div" onClick={this.onWrite}> <textarea id="text" rows={13} defaultValue={this.state.value} onChange={this.handleChange}></textarea></div> <Button onClick={this.handleRead}>Read</Button>

这应该可以解决您的问题。

【讨论】：