javascript - React 模态窗口不显示 Hooks

Question

我想知道为什么我的模态视图没有出现。我遵循了语义用户界面和引导程序中的示例，但没有一个有效。

我不确定是否需要使用 Hooks。或者 HandleEditRecipe 函数不在我的组件的顶层并且它不渲染？

我想通过单击此按钮来显示模式视图：

<button onClick={HandleEditRecipe.bind(null, key, data)}>Edit</button>

这是我的代码：

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

const RecipeCard = ({
  id: key,
  recipies,
  updateRecipe,
  deleteRecipe,
  data
}) => {
  const [show, setShow] = React.useState(false)
         
  let recipeUpdate = {
    name: '',
    image: '',
    ingredients: '',
    instructions: ''
  }
      
  const handleShow = () => setShow(true)

  function HandleEditRecipe (key, data) {
    const handleClose = () => setShow(false)
    return (
      <>
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className='card'>
              <form action='' className='admin-form'>
                <input value={data.name} onChange={e => handleChange(e, key)} type='text' name='name' />
                <input value={data.image} onChange={e => handleChange(e, key)} type='text' name='image' />
                <textarea value={data.ingredients} onChange={e => handleChange(e, key)} name='ingredients' rows='3' />
                <textarea value={data.instructions} onChange={e => handleChange(e, key)} name='instructions' rows='15' />
              </form>
              <button onClick={() => handleValidEdit(key)}>Supprimer</button>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button variant='secondary' onClick={handleClose}>
              Close
            </Button>
            <Button variant='primary' onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    )
  }

  return (
    <div className='card'>
      <div className='recipe'>
        <h2>{data.name} - {key}</h2>
        <Button variant='primary' onClick={handleShow}>
          Launch demo modal
        </Button>
        <button onClick={HandleEditRecipe.bind(null, key, data)}>Edit</button>
        <div className='image'>
          <img src={requireImage(data.image)} alt={data.name} />
        </div>
        <ul className='list-ingredients'>
          {data.ingredients}
        </ul>
        <ol className='list-instructions'>
          {data.instructions}
        </ol>
      </div>
    </div>
  )
}

export default RecipeCard

谢谢 ！

编辑解决方案：

我终于设法用钩子显示模态视图：

const RecipeCard = ({
  id: key,
  recipies,
  updateRecipe,
  deleteRecipe,
  data
}) => {
  const [isOpen, setIsOpen] = React.useState(false)

  const showModal = () => {
    setIsOpen(true)
  }

  const hideModal = () => {
    setIsOpen(false)
  }

  return (
    <div className='card'>
      <div className='recette'>
        <h2>{data.name} - {key}</h2>
        <button onClick={() => handleDeleteRecipe(key)}>Delete</button>
        <div className='image'>
          <img src={requireImage(data.image)} alt={data.name} />
        </div>
        <ul className='liste-ingredients'>
          {ingredients}
        </ul>
        <ol className='liste-instructions'>
          {instructions}
        </ol>
      </div>
      <button onClick={showModal}>Edit</button>
      <Modal show={isOpen} onHide={hideModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className='card'>
            <h1>DIOOO</h1>
            <form action='' className='admin-form'>
              <input value={data.name} onChange={e => handleChange(e, key)} type='text' name='name' />
              <input value={data.image} onChange={e => handleChange(e, key)} type='text' name='image' />
              <textarea value={data.ingredients} onChange={e => handleChange(e, key)} name='ingredients' id='' rows='3' />
              <textarea value={data.instructions} onChange={e => handleChange(e, key)} name='instructions' id='' rows='15' />
            </form>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <button onClick={hideModal}>Close</button>
          <button>Save</button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

export default RecipeCard

标签： javascriptreactjsbootstrap-modalreact-bootstrap