[英]Unable to use my reusable react component inside react bootstrap modal
I Have created a resusable textarea react component:我创建了一个可重用的 textarea 反应组件:
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;
Which is working fine when being used in any other component, but when I use it inside react-bootstrap modal, on each key press the focus is getting lost from text area and I have to click inside it again.在任何其他组件中使用时都可以正常工作,但是当我在 react-bootstrap 模态中使用它时,每次按下按键时,焦点都会从文本区域中丢失,我必须再次在其中单击。 I doubt that on each key press the state is changing due to which the modal re renders and that's why focus from text area is getting lost.
我怀疑在每次按下按键时,状态是否会因模式重新呈现而发生变化,这就是文本区域的焦点丢失的原因。
This is how am using it inside react bootstrap modal:这就是我在 react bootstrap modal 中使用它的方式:
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;
How can I type in my reusable text area without it loosing focus on each key press.如何在我的可重复使用的文本区域中输入,而不会失去对每次按键的关注。
I was able to fix the issue, this SO question and solutions mentioned over here helped me: ReactJs component structure - Form inside modal我能够解决这个问题,这里提到的这个问题和解决方案帮助了我: ReactJs component structure - Form inside modal
I basically separated the Modal body part and all it's dependent state and setters method to a separate component我基本上将 Modal 主体部分及其所有依赖状态和 setter 方法分离到一个单独的组件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.