当他们单击列表项时，如何让我的 React 应用程序在我的 bootstrap 模态中显示对象信息？

Question

我已经尝试了一段时间，但没有成功地尝试将它带到用户点击 table 项目的位置，它会弹出一个 window 的信息他们点击了什么。我有一个 JSON 文件，希望它从文件而不是实际文件页面中读取信息。

这是主应用页面

import './App.scss';
import list from './list.json';

import Table from 'react-bootstrap/Table';
import MyVerticallyCenteredModal from './components/modal';

function App() {

  const [modalShow, setModalShow] = useState(false);
  
  const [menu, setMenu] = useState(
    {
      food: ""
    }
  );

  const handleChange = (event) => {
    setMenu({
      food: event.target.value
    });
  }

  const [looped] = useState(
    list.map((obj, i) => {
      return (
        <tr key={i} onClick={() => {
          
          setModalShow(true);

          handleChange(obj.food)
          console.log(obj.food)
        
        }
        }>
          <td>{i + 1}</td>
          <td>{obj.food}</td>
          <td>{obj.description}</td>
          <td>${obj.price.toString()}</td>
        </tr>
      )
    })
    );
    
    // console.log(menu);

    return (
      <div className="menu-template container-lg">
      <div className="mt-5 mb-5 d-flex">
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Meal Name</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            {
              looped
            }
          </tbody>
        </Table>
      </div>
            <MyVerticallyCenteredModal
              food={food}
              description={description}
              price={price}
              show={modalShow}
              onHide={() => setModalShow(false)}
            />
    </div>
  );
}

export default App;

这是模态


import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

import image from '../assets/image1.jpg';

function MyVerticallyCenteredModal(props) {
    return (
            <Modal
                {...props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header>
                    <Modal.Title id="contained-modal-title-vcenter">
                        <img src={image} alt="..." width="100%" />
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>
                        Some Tasty Food!</h4>
                    <p>
                        This is the best food you've ever eaten!
        </p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={props.onHide} variant="danger">Close</Button>
                </Modal.Footer>
            </Modal>
    ); 

}


export default MyVerticallyCenteredModal;```

Answer 1

在模型文件中。当您导出组件时，请删除默认值。使用这样的东西-

export {MyVetrical....}

让我知道它是否有效

Answer 2

乍一看，您似乎没有向 handleChange() 函数添加事件，只是从 obj 字典中传递了一个参数。此外，由于您仅在菜单中有值时才显示模式，因此我只将其用作显示的指示符。

这是一个小样本：

  
  const [menu, setMenu] = useState(null);

  const [looped] = useState(
    list.map((obj, i) => {
      return (
        <tr key={i} onClick={() => setMenu({food: obj.food, description: obj.description, price: obj.price, <etc...>})}>
          <td>{i + 1}</td>
          <td>{obj.food}</td>
          <td>{obj.description}</td>
          <td>${obj.price.toString()}</td>
        </tr>
      )
    })
    );
    
    // console.log(menu);

    return (
      <div className="menu-template container-lg">
      <div className="mt-5 mb-5 d-flex">
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Meal Name</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            {
              looped
            }
          </tbody>
        </Table>
      </div>
            <MyVerticallyCenteredModal
              {...menu} /** Just spreading out the dictionary from the state */ 
              show={!!menu} // Double ! makes it a true or false
              onHide={() => setMenu(null)} // or false..
            />
    </div>
  );
}   ```



----------

Because you have now passed the props from that state, you can now use
them on the modal like this:


function MyVerticallyCenteredModal(props) {
const {food, descriptions, price} = props

console.log('view passed props')
....
}

当他们单击列表项时，如何让我的 React 应用程序在我的 bootstrap 模态中显示对象信息？

How do I get my react app to display object information in my bootstrap modal when they click on a list item?

reactjs

react-bootstrap