Javascript 无法在react引导模式中使用我的可重用react组件

我已创建一个可恢复的textarea react组件：

import React from 'react';
import '../form-input/form-input.styles.scss';

const TextAreaComponent = ({ handleChange, label, ...otherProps }) => (
 <div className="group">
   <label htmlFor="comments">{label}</label>
   <textarea className='form-input m-0' id="comments" onChange={handleChange} {...otherProps} />
 </div>
); export default TextAreaComponent;

从“React”导入React；
导入“../form input/form input.styles.scss”；
const TextAreaComponent=（{handleChange，label，…otherProps}）=>(
{label}
); 导出默认TextArea组件；

在任何其他组件中使用时，它都可以正常工作，但是当我在react bootstrap模式中使用它时，每次按键时，焦点都会从文本区域丢失，我必须再次在其中单击。我怀疑每按一次键，状态都会发生变化，因为模式会重新呈现，这就是为什么文本区域的焦点会丢失的原因

这是我在react引导模式中使用它的方式：

  import React, { useState } from 'react';
  import './callStatusCellRenderer.styles';
  import Button from 'react-bootstrap/Button';
  import Modal from 'react-bootstrap/Modal';
  import baseUrl from '../../../apiUtils/baseUrl';
  import CustomDatePicker from '../custom-datepicker/custom-datepicker.component';
  import SelectInputComponent from '../select-input/selectInput.component';
  import TextAreaComponent from '../textarea-input/textarea.component';
  import {
  ButtonContainer,
  CalendarContainer,
  InputContainer
  } from './callStatusCellRenderer.styles';
  import axios from 'axios';

  const CallStatusRendererComponent = ({ data }) => {
    const callStatusOption = ['Option A', 'Option B', 'Option C', 'Option D'];

  const [modalShow, setModalShow] = useState(false);
  const [status, setStatus] = useState(data.callStatusInfo.status);
  const [callDate, setCallDate] = useState(new Date(data.callStatusInfo.dt) || new Date());
  const [update, setUpdate] = useState(false);
  const [comments, setComments] = useState(data.callStatusInfo.comments);

  const callInfoS = {
    initialStatus: data.callStatusInfo.status,
    initialCallDate: data.callStatusInfo.dt || new Date(),
    initialComments: data.callStatusInfo.comments
  };

  const getValue = () => {
    if (update) {
      return status;
    } else {
      return callInfoS.initialStatus
    }
  };

  const onDateChange = dt => setCallDate(dt);

  const PopUpModal = (props) => {
    const onSubmit = async e => {
      e.preventDefault();
      props.onHide();
      const patchBody =  {
        "status": status,
        "dt": callDate,
        'comments': comments
      };
      const updateCallStatusUrl = `${baseUrl}<<myAPIURL>>${data._id}`;
      const config = {
        headers: {
          'Content-type': 'application/json',
          'Authorization': localStorage.getItem('token')
        }
      };
      await axios.patch(updateCallStatusUrl, {callStatusInfo: patchBody}, config);
      setUpdate(true);
    };

    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            animation={false}
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Update Call Info
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Call Details</h4>
            <InputContainer>
              <SelectInputComponent
                name="status"
                label="Status"
                value={status}
                defaultOption="Select Status"
                options={callStatusOption}
                onChange={(e) => setStatus(e.target.value)}
              />
            </InputContainer>
            <TextAreaComponent name="comments" label="Comments" value={comments} onChange={(e) => setComments(e.target.value)}/>
            <CalendarContainer>
              <div className="mr-2"> Called Patient On:</div>
              <CustomDatePicker className="ml-4" dtVal={callDate} handleChange={onDateChange}/>
            </CalendarContainer>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={e => onSubmit(e)}>Save</Button>
          </Modal.Footer>
        </Modal>
    );
  };

  return (
      <>
        <div onClick={() => setModalShow(true)}>
          <ButtonContainer>{getValue()}</ButtonContainer>
        </div>
        <PopUpModal
          show={modalShow}
          onHide={() => setModalShow(false)}
        />
      </>
  );
};export default CallStatusRendererComponent;

import React，{useState}来自“React”；
导入“./callStatusCellRenderer.styles”；
从“反应引导/按钮”导入按钮；
从“反应引导/模式”导入模式；
从“../../../apiUtils/baseUrl”导入baseUrl；
从“../custom datepicker/custom datepicker.component”导入CustomDatePicker；
从“../select input/selectInput.component”导入SelectInputComponent；
从“../textarea input/textarea.component”导入TextAreaComponent；
进口{
按钮容器，
日历容器，
输入容器
}来自“./callStatusCellRenderer.styles”；
从“axios”导入axios；
const callStatusRenderComponent=（{data}）=>{
const callStatusOption=[“选项A”、“选项B”、“选项C”、“选项D]”；
const[modalShow，setModalShow]=useState（false）；
const[status，setStatus]=useState（data.callStatusInfo.status）；
const[callDate，setCallDate]=useState（新日期（data.callStatusInfo.dt）| |新日期（））；
const[update，setUpdate]=useState（false）；
const[comments，setComments]=useState（data.callStatusInfo.comments）；
常数callinfo={
initialStatus:data.callStatusInfo.status，
initialCallDate:data.callStatusInfo.dt | | new Date（），
initialComments:data.callStatusInfo.comments
};
常量getValue=（）=>{
如果（更新）{
返回状态；
}否则{
返回callinfo.initialStatus
}
};
const onDateChange=dt=>setCallDate（dt）；
常量PopUpModal=（道具）=>{
const onSubmit=async e=>{
e、 预防默认值（）；
props.onHide（）；
常数patchBody={
“地位”：地位，
“dt”：callDate，
“评论”：评论
};
const updateCallStatusUrl=`${baseUrl}${data.\u id}`；
常量配置={
标题：{
“内容类型”：“应用程序/json”，
“授权”：localStorage.getItem（'token'）
}
};
等待axios.patch（updateCallStatusUrl，{callStatusInfo:patchBody}，config）；
设置日期（真）；
};
返回(
更新呼叫信息
通话详情
setStatus（e.target.value）}
/>
setComments（e.target.value）}/>
致电患者：
onSubmit（e）}>保存
);
};
返回(
setModalShow（真）}>
{getValue（）}
setModalShow（假）}
/>
);
};导出默认CallStatusRenderComponent；

---

如何输入可重复使用的文本区域而不使其在每次按键时失去焦点。

我能够解决这个问题，因此这里提到的问题和解决方案帮助了我：

---

我基本上将模态体部分及其所有依赖状态和setters方法分离为一个单独的组件

我能够解决这个问题，因此这里提到的问题和解决方案帮助了我：

---

我基本上将模态主体部分及其所有依赖状态和setters方法分离到一个单独的组件

尝试向文本区域添加唯一键，如果键相同，它将告诉DOM这是相同的组件。我更新了我的代码并向TextAreaComponent添加了key:setComments（e.target.value）}/>但这仍然不起作用尝试向文本区域添加唯一的key，如果key相同，它会告诉DOM这是相同的组件。我更新了代码并向TextAreaComponent:setComments（e.target.value）}/>添加了密钥，但这仍然不起作用