如何解决点击Edit按钮后React Bootstrap Modal不显示的问题？

核心修改点 #

你现在的Modal不显示是因为React Bootstrap的Modal组件必须接收show布尔属性控制显隐，你父组件定义的modalShow状态完全没有传递给子组件，同时缺少关闭Modal的回调逻辑，具体修改如下：

第一步：修改product-screen.jsx #

1. 删掉没用的reactjs-popup样式导入，你用的是React Bootstrap组件，不需要这个依赖的样式
2. 给ModalScreen组件传递modalShow状态、控制状态更新的setModalShow方法，还有编辑中的updateProduct状态
3. 补充点击保存后关闭Modal的逻辑

修改后代码：

import { useState } from 'react';
import { Button, Card } from 'react-bootstrap';
import ModalScreen from './modal-screen';

const ProductCardScreen = ({ product }) => {
  const { productName, productPrice, productInStock, productDescription } = product;
  const [modalShow, setModalShow] = useState(false);

  const [updateProduct, setProductUpdate] = useState({
    productDescription,
    productInStock,
    productName,
    productPrice,
  });

  const handleChange = (event) => {
    console.log('event', event.target.value);
    setProductUpdate({
      ...updateProduct,
      [event.target.name]: event.target.value,
    });
  };

  const saveUpdatedProduct = () => {
    // 这里写保存到后端的逻辑
    // 保存成功后关闭模态框
    setModalShow(false);
  };

  const handleDelete = () => {
    if (window.confirm('Are you sure you want to delete?')) {
      // 这里写删除逻辑
    }
  };

  return (
    <div>
      <Card>
        <Card.Body>
          <Card.Title>Product Name: {product.productName}</Card.Title>
          <Card.Text>
            Product Description: {product.productDescription}
          </Card.Text>
          <Card.Text>Product Quantity: {product.productInStock}</Card.Text>
          <Card.Text>Price: ${product.productPrice}</Card.Text>
          <div
            style={{
              float: 'right',
            }}
          >
            <Button
              style={{ margin: '10px' }}
              onClick={() => setModalShow(true)}
              className='btn btn-primary'
              variant='primary'
            >
              Edit
            </Button>

            <Button
              onClick={handleDelete}
              className='btn btn-danger'
              variant='danger'
            >
              Delete
            </Button>
          </div>
        </Card.Body>
      </Card>

      <ModalScreen 
        show={modalShow}
        onHide={() => setModalShow(false)}
        product={updateProduct} 
        handleChange={handleChange}
        saveProduct={saveUpdatedProduct}
      />
    </div>
  );
};

export default ProductCardScreen;

第二步：修改modal-screen.jsx #

1. 接收父组件传的show、onHide、saveProduct属性
2. 给Modal组件绑定show和onHide属性
3. 给所有表单输入框添加name属性，属性值要和你状态里的字段名完全对应，否则handleChange无法正常更新状态
4. 给保存和取消按钮绑定对应的回调

修改后代码：

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

const ModalScreen = ({ product, handleChange, show, onHide, saveProduct }) => {
  const { productName, productPrice, productInStock, productDescription } = product;

  return (
    <Modal
      show={show}
      onHide={onHide}
      animation={false}
      size='lg'
      aria-labelledby='contained-modal-title-vcenter'
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id='contained-modal-title-vcenter'>
          Product Information
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form>
          <Form.Group className='mb-3'>
            <Form.Label>Name</Form.Label>
            <Form.Control
              name="productName"
              onChange={handleChange}
              value={productName}
              type='text'
            />
          </Form.Group>

          <Form.Group className='mb-3'>
            <Form.Label>Description</Form.Label>
            <Form.Control
              name="productDescription"
              onChange={handleChange}
              value={productDescription}
              type='text'
            />
          </Form.Group>

          <Form.Group className='mb-3'>
            <Form.Label>Amount In Stock</Form.Label>
            <Form.Control
              name="productInStock"
              onChange={handleChange}
              value={productInStock}
              type='number'
            />
          </Form.Group>

          <Form.Group className='mb-3'>
            <Form.Label>Price</Form.Label>
            <Form.Control
              name="productPrice"
              onChange={handleChange}
              value={productPrice}
              type='number'
              step="0.01"
            />
          </Form.Group>

          <Button variant='primary' type='button' onClick={saveProduct} className="me-2">
            Save
          </Button>
          <Button variant='danger' type='button' onClick={onHide}>
            Cancel
          </Button>
        </Form>
      </Modal.Body>
    </Modal>
  );
};

export default ModalScreen;

额外优化点 #

• 价格和库存输入框改成了number类型，避免用户输入非数字内容
• 给Modal头部加了closeButton属性，显示右上角关闭按钮
• 删除按钮的variant改成了danger，和样式类保持一致，避免样式冲突

内容的提问来源于stack exchange，提问作者Mohamed Ali