如何根据单击的内容渲染模态？

Question

我有一种形式形式的模态。我有一个添加按钮，当我单击此按钮时，表单打开。但是，我还想重复使用该表格，以便能够在我单击特定项目的DIV时使用表格创建的项目编辑。

那么，我该如何告诉我的应用何时渲染添加项目部分以及何时渲染编辑项目？我使用模态的上下文，它仅具有默认值（false）。当我单击按钮和项目时，模态将打开，但是添加表单默认。

这是我的形式的样子：

const AddEditForm = () => {
  const [list, setList] = useContext(DataContext)
  const [modal, setModal] = useContext(DataContext2)
  const { item, setItem, id, updatedItem, setUpdatedItem } =
    useContext(DataContext3)
  const [editForm, setEditForm] = useState(false)
  const STATUS = ['-', 'todo', 'inProgress', 'done']
  const USERS = ['-', 'Unassigned', 'JD', 'AJ', 'SS']

  const toggleOnClick = () => {
    addItem()
    setModal(!modal)
  }

  const toggleOnClickEdit = () => {
    UpdateItem()
    setModal(!modal)
  }

  const addItem = () => {
    if (item.status === 'todo' && item) {
      setList((prev) => {
        return {
          ...prev,
          todo: {
            title: 'Todo',
            tasks: [
              ...prev.todo.tasks,
              {
                id: v4(),
                title: item.title,
                status: item.status,
                user: item.user,
                description: item.description,
              },
            ],
          },
        }
      })
    } else if (item.status === 'inProgress') {
      setList((prev) => {
        return {
          ...prev,
          inProgress: {
            title: 'In Progress',
            tasks: [
              ...prev.inProgress.tasks,
              {
                id: v4(),
                title: item.title,
                status: item.status,
                user: item.user,
                description: item.description,
              },
            ],
          },
        }
      })
    } else {
      setList((prev) => {
        return {
          ...prev,
          done: {
            title: 'Done',
            tasks: [
              ...prev.done.tasks,
              {
                id: v4(),
                title: item.title,
                status: item.status,
                user: item.user,
                description: item.description,
              },
            ],
          },
        }
      })
    }
    setItem({ title: '', description: '', status: '', user: '', id: v4() })
  }

  const UpdateItem = () => {
    console.log('this is the edit form')
  }

  return (
    <form>
      {editForm ? (
        <div>
          <h2> Edit Task</h2>
          <label htmlFor="title">Title: </label>
          <input
            type="text"
            value={item.title}
            required
            placeholder={item.title}
            onChange={(ev) => setItem({ ...item, title: ev.target.value })}
          />
          <label htmlFor="description">Description: </label>
          <input
            type="textarea"
            id="description"
            value={item.description || ''}
            name="description"
            placeholder={item.description}
            onChange={(ev) =>
              setItem({ ...item, description: ev.target.value })
            }
          />
          <label htmlFor="status">Status: </label>
          <select
            className="form-select"
            id="status"
            required
            value={item.status}
            placeholder={item.status}
            onChange={(ev) => setItem({ ...item, status: ev.target.value })}
          >
            {STATUS.map((status) => (
              <option key={status} value={status}>
                {status}
              </option>
            ))}
          </select>
          <label htmlFor="user">User: </label>
          <select
            className="form-select"
            id="user"
            required
            value={item.user}
            placeholder={item.user}
            onChange={(ev) => setItem({ ...item, user: ev.target.value })}
          >
            {USERS.map((user) => (
              <option key={user} value={user}>
                {user}
              </option>
            ))}
          </select>
          <button type="button" onClick={toggleOnClickEdit}>
            Update
          </button>
        </div>
      ) : (
        <div>
          <h2> Add Task</h2>
          <label htmlFor="title">Title: </label>
          <input
            type="text"
            value={item.title || ''}
            required
            onChange={(ev) => setItem({ ...item, title: ev.target.value })}
          />
          <label htmlFor="description">Description: </label>
          <input
            type="textarea"
            id="description"
            value={item.description || ''}
            name="description"
            placeholder="Describe your task..."
            onChange={(ev) =>
              setItem({ ...item, description: ev.target.value })
            }
          />
          <label htmlFor="status">Status: </label>
          <select
            className="form-select"
            id="status"
            required
            value={item.status || ''}
            onChange={(ev) => setItem({ ...item, status: ev.target.value })}
          >
            {STATUS.map((status) => (
              <option key={status} value={status}>
                {status}
              </option>
            ))}
          </select>
          <label htmlFor="user">User: </label>
          <select
            className="form-select"
            id="user"
            required
            value={item.user || ''}
            onChange={(ev) => setItem({ ...item, user: ev.target.value })}
          >
            {USERS.map((user) => (
              <option key={user} value={user}>
                {user}
              </option>
            ))}
          </select>
          <button type="button" onClick={toggleOnClick}>
            Add
          </button>
        </div>
      )}
    </form>
  )
}

export default AddEditForm

谢谢，希望这也会帮助某人！

Answer 1

1. 添加单击HTML中的模态，然后通过该模式传递当前数据。

2. 在您的点击函数中，将表单数据设置为从参数传递的数据

   单击（数据）{
   this.editform = this.fb.group（{
   标题：item.title，
   状态：item.Status，
   用户：item.user，
   描述：item.Description
   }））
   }