React不允许我编辑文本字段，失去焦点

Question

​

​

当我打字时，文本框就会失去焦点。我一次只能打一个字母。以下是我的代码：-

    <TabPanel value={value} index={0}>
                  {[...Array(commentCount),].map((item, index) => {
                    return (
                      <>
                        <div className="col-12 d-flex comments-content">
                          <div className="mb-0 flex-10">
                            <textarea name="" id="" rows="4" className="w-100 p-2 mb-3" data-testid={"commentTextArea_" + index} 
                            value={ commentArea.find(x=>x.id==index)?.value==undefined?"":commentArea.find(x=>x.id==index)?.value} 
                            onChange={(e)=>{setComment(e,index)}}/>
                          </div>
                            </div>
                          </div>

我的js密码是:-

   const [commentArea,setCommentArea]=useState([{value:"",id:0}]);
 const setComment=(e,index)=>{
const searched= commentArea.find(x => x.id === index);
if(searched!="" &&  searched!=undefined){
  searched.value=e.target.value;
}
else{
  let res={
    value:e.target.value,id:index
  }
  commentArea.push(res);
}
setCommentArea([...commentArea]);

}

Answer 1

textfield应该有如下所示的事件处理程序函数：

  const handleChange = (event) => {
    setCommentArea(event.target.value);
  };

Answer 2

不要使用不断变化的钥匙。