html - 如果直接在带有按钮的 HTML 中，引导模式可以完美工作，但如果它包含在具有动态输入的 React 组件中，则不会响应

Question

我想在一个页面上有几个模式，所有模式都有独特的提示和按钮文本。每个都将由不同的按钮触发，当然有一个唯一的 id。目前，这工作得很好：

<button className="btn btn-alert text-uppercase text-center align-middle" data-toggle={'modal'}
data-target={'#nameModalDmg'}>Damage</button>
<div
      className="modal fade"
      id='#nameModalDmg'
      role="dialog"
      aria-labelledby='something'
      aria-hidden="true"
>
     <div className="modal-dialog modal-dialog-centered" role="document">
        <div className="modal-content">
          <button
            type="button"
            className="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <i className="bi bi-x"></i>
          </button>
          <div className="modal-sect pb-0">
            <h5>'Something'</h5>
          </div>
          <div className="card content-card name-card">
            <input
              id="name"
              name="name"
              placeholder="Name"
              type="number"
              min="0"
              value={value}
              onChange={e => setValue(e.target.value)}
            />
          </div>
          <button
            className="text-uppercase btn-primary modal-button"
            onClick={() => submitFunction(value)}
            data-dismiss="modal"
          >
            "Submit"
          </button>
        </div>
      </div>
</div>

但是，如果我尝试将所有这些都放在一个组件中，即使文本仍然是硬编码的（相对于 id 的一些字符串插值和 'Something' 文本的自定义值），它根本不起作用！

const ManualEntryModal = () => {
  const [value, setValue] = useState(null);


  return (
    <div
      className="modal fade"
      id={`#nameModalDmg`}
      role="dialog"
      aria-labelledby='something'
      aria-hidden="true"
    >
      <div className="modal-dialog modal-dialog-centered" role="document">
        <div className="modal-content">
          <button
            type="button"
            className="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <i className="bi bi-x"></i>
          </button>
          <div className="modal-sect pb-0">
            <h5>Something</h5>
          </div>
          <div className="card content-card name-card">
            <FloatingLabel
              id="name"
              name="name"
              placeholder="Name"
              type="number"
              min="0"
              value={value}
              onChange={e => setValue(e.target.value)}
            />
          </div>
          <button
            className="text-uppercase btn-primary modal-button"
            onClick={() => submitFunction(value)}
            data-dismiss="modal"
          >
            Submit
          </button>
        </div>
      </div>
    </div>
  )
}
const otherThing = () => {
   return (
      <button className="btn btn-alert text-uppercase text-center align-middle" data-toggle={'modal'}
      data-target={'#nameModalDmg'}>Damage</button>
      <ManualEntryModal />
   )
}

非常清楚地在 DOM 中 id 是正确的，并且按钮的目标是模态的正确 id。所以我不知道为什么将模式放在反应组件中会突然破坏它。有任何想法吗？我不明白为什么使用 Bootstrap 类而不是 Bootstrap React 组件会导致任何麻烦，即使这样，将按钮放在具有模态类的组件内也会导致同样缺乏响应。

也没有抛出错误。

标签： htmlreactjsbootstrap-4bootstrap-modal