在其中键入任何值时关闭模态？

Question

我想在 React 中实现更新功能。我创建的是我有一个 Update 按钮，单击它时，会弹出一个带有输入字段的模式，用于输入更新后的值。但是只要我输入一个字符，它就会关闭并再次打开（附 gif）。下面附上React组件的代码和gif。

import React , {useState} from'react';
import { Button,Form,Modal } from 'react-bootstrap';


const handleShowModal = (i) => {
    setModalShow(true);
}

const handleCloseModal = () => {
    setModalShow(false);
}

const handleCommentChange = (event) => {
    setModalInputComment(event.target.value);
}


function MyVerticallyCenteredModal(props) {

    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
        <Modal.Body>
          <Form>
              <div className="mb-3">
                <label  className="col-form-label">Username:</label>
                <input type="text" className="form-control" id="comment" />
              </div>
              <div className="mb-3">
                <label  className="col-form-label">Comment:</label>
                <textarea className="form-control" id="comment-text" value={modalInputComment} onChange={handleCommentChange}></textarea>
              </div>
          </Form>
        </Modal.Body>
        <Modal.Footer>
            <Button >Update</Button>
            <Button variant='secondary' onClick={handleCloseModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }

  const [modalShow, setModalShow] = useState(false);
  
  const [modalInputComment, setModalInputComment] = useState();

  

return(
<>
    <div>
        {comments.map((item,key)=>(
            <div className="comment" key={key}>
                <h4>{item.username}</h4>
                <p>{item.text}</p>
                <Button variant="outline-primary btn-sm mx-3" onClick={() => handleShowModal(key)}>Update</Button>
            </div>

        ))}

        <MyVerticallyCenteredModal show={modalShow} />

    </div>

  </>
  )
 };

 export default CommentsList;

这是作为 props 传递的 comments 数组

以上是行为的动图

Answer 1

问题

据我所知，您正在另一个组件中重新声明 MyVerticallyCenteredModal，因此每次组件的状态更新或以其他方式重新呈现时，都会创建一个新的 MyVerticallyCenteredModal 组件。这将卸载以前的“实例”并安装一个新的“实例”。

解决方案

将 MyVerticallyCenteredModal 组件定义移到任何其他组件之外，传递所有适当的属性。

function MyVerticallyCenteredModal({
  modalInputComment, // <-- destructure props
  handleCommentChange, // <-- destructure props
  ...props
}) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Body>
        <Form>
          <div className="mb-3">
            <label className="col-form-label">Username:</label>
            <input type="text" className="form-control" id="comment" />
          </div>
          <div className="mb-3">
            <label className="col-form-label">Comment:</label>
            <textarea
              className="form-control"
              id="comment-text"
              value={modalInputComment}
              onChange={handleCommentChange}
            />
          </div>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button >Update</Button>
        <Button variant='secondary' onClick={handleCloseModal}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

组件

  ...

  const handleShowModal = (i) => {
    setModalShow(true);
  }

  const handleCloseModal = () => {
    setModalShow(false);
  }

  const handleCommentChange = (event) => {
    setModalInputComment(event.target.value);
  }

  const [modalShow, setModalShow] = useState(false); 
  const [modalInputComment, setModalInputComment] = useState();

  return(
    <>
      <div>
        {comments.map((item,key)=>(
          <div className="comment" key={key}>
            <h4>{item.username}</h4>
            <p>{item.text}</p>
            <Button
              variant="outline-primary btn-sm mx-3"
              onClick={() => handleShowModal(key)}
            >
              Update
            </Button>
          </div>
        ))}

        <MyVerticallyCenteredModal
          show={modalShow}
          modalInputComment={modalInputComment} // <-- pass props
          handleCommentChange={handleCommentChange} // <-- pass props
        />
      </div>
    </>
  );
};

在其中键入任何值时关闭模态？

Closing of modal while typing any value in it?

reactjs

bootstrap-4

react-modal

react-hooks

react-state

问题

解决方案