ReactJS 在 运行 函数后清除 textarea 值

Question

我有以下代码用于将评论添加到 table

const [newComment, setNewComment] = useState('')

<textarea onChange={e => setNewComment(e.target.value)} placeholder='Add a comment'/>

<button onClick={() => AddComment(newComment)}>Add</button>

点击按钮添加评论后，我希望将文本区域的值clear/reset改为原始占位符'Add a comment'。目前，在我按下按钮后，评论被添加，但是文本区域保留了“newComment”值，这意味着我必须在插入新评论之前手动清除它，这不是很方便 - 有什么建议吗？

Answer 1

应该可以。按下按钮后，将值设置为空字符串

const [newComment, setNewComment] = useState('')

<input value={newComment} onChange={e => setNewComment(e.target.value)} placeholder='Add a comment'/>

<button onClick={() => {
  AddComment(newComment)
  setNewComment('')
 }}>Add</button>

Answer 2

我想你想通过给它一个反映 newComment 状态的 value 属性来使文本区域成为 React 所谓的“受控组件”：

  const [newComment, setNewComment] = useState("");

  return (
    <div>
      <textarea
        onChange={e => setNewComment(e.target.value)}
        placeholder="Add a comment"
        value={newComment}
      />

      <button
        onClick={() => {
          AddComment(newComment)
          setNewComment("");
        }}
      >
        Add
      </button>
    </div>
  );