React使用Bootstrap4模态框时设置动态id失效的解决方法

问题原因 #

Bootstrap 4 模态框的触发逻辑完全依赖两个属性的匹配关系：

• 触发按钮的data-target属性值（格式为#对应模态框ID）
• 模态框根元素的id属性值

你之前修改失败，要么是两个属性值没有同步修改、字符串拼接格式错误，要么是页面同时存在多个相同ID的模态框元素，导致Bootstrap定位元素出错。固定ID时所有模态框共用同一个ID，Bootstrap永远匹配到第一个渲染的模态框，就会出现点哪个编辑都弹出同一条内容的问题。

修复步骤 #

• 先在组件内定义唯一的模态框ID常量，避免两处绑定值不一致
• 同步修改按钮的data-target和模态框的id属性，保证值完全匹配
• 修复代码里的其他语法问题，避免功能异常

修复后完整代码 #

import { Fragment, useState } from 'react';

export default function EditTodo({ todo }) {
  // 修正useState初始值，绑定正确的description字段，不要传入整个todo对象
  const [description, setDescription] = useState(todo.description);
  // 定义全局唯一的模态框ID，用todo.id保证每个待办项的模态框ID不重复
  const modalId = `editTodoModal-${todo.id}`;

  return (
    <Fragment>
      {/* 编辑触发按钮 */}
      <button
        type="button"
        className="btn btn-primary"
        data-toggle="modal"
        // data-target带#前缀，和模态框ID严格对应
        data-target={`#${modalId}`}
      >
        Edit
      </button>

      {/* 模态框根元素 */}
      <div 
        className="modal" 
        // 绑定动态ID，不带#前缀
        id={modalId}
      >
        <div className="modal-dialog">
          <div className="modal-content">
            {/* 模态框头部 */}
            <div className="modal-header">
              <h4 className="modal-title">Edit A Todo</h4>
              <button type="button" className="close" data-dismiss="modal">
                &times;
              </button>
            </div>

            {/* 模态框内容区 */}
            <div className="modal-body">
              <input
                type="text"
                className="form-control"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>

            {/* 模态框底部 */}
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-primary"
                data-dismiss="modal"
              >
                Edit
              </button>
              <button
                type="button"
                className="btn btn-danger"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

注意点 #

• 动态ID不要包含特殊字符，避免CSS选择器匹配失败，用短横线拼接todo.id是最稳妥的格式
• 所有JSX中的类名必须用className，不能直接写原生class属性，否则React会抛出警告，甚至导致样式不生效
• 输入框的value要绑定你定义的state变量description，不要直接绑定todo.description，否则输入框内容无法正常修改

内容的提问来源于stack exchange，提问作者Zulfiya Yumagulova