Невозможно использовать мой реактивный компонент многократного использования - PullRequest
Новая
       10

Невозможно использовать мой реактивный компонент многократного использования

0 голосов
/ 04 февраля 2020

Я создал повторно используемый компонент реагирования с текстовой областью: 

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;

, который работает нормально при использовании в любом другом компоненте, но когда я использую его внутри реагирующего - bootstrap модального, при каждом нажатии клавиши фокус теряется из текстовой области, и я должен снова щелкнуть внутри него. Я сомневаюсь, что при каждом нажатии клавиши состояние меняется, из-за чего модал рендерится, и поэтому фокус из текстовой области теряется.

Вот как я использую его внутри реагирует bootstrap модал: 

  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;

Как я могу печатать в области многократного использования текста, не теряя фокус при каждом нажатии клавиши.

1 Ответ

0 голосов
/ 04 февраля 2020

Мне удалось решить проблему, мне помог этот вопрос и решения, упомянутые здесь: ReactJs структура компонента - Форма внутри модального

Я в основном отделил часть тела Модального и все его зависимые состояния и метод установки в отдельный компонент

...