javascript - 使用 Hooks 构建 react-bootstrap 表单

Question

我正在构建一个模式表单，以便能够将信息保存在数据库中。我做了一个页面来显示人员列表。

对于显示的每个人，都有一个按钮允许将此人添加为应用程序的用户。在按钮的单击事件中，我构建了一个模式表单，其中包含我们必须填写的两个字段（用户名、密码），然后单击“保存”按钮以保存数据。

我将不同的字段与来自 react 的 hooks 对象相关联。但我遇到了一个问题：我无法在模式表单上的字段中输入值。

这是我的代码：PersonsPage.jsx

import React, {useEffect, useState} from "react";
import {Link, NavLink} from "react-router-dom";
import ModalForm from "../../components/Forms/ModalForm";
import moment from "moment";

const PersonsPage = (props) => {
    const [persons, setPersons] = useState([]);
    const [openModal, setOpenModal] = useState(false);
    let [children, setChildren]  = useState(null);
    const [user, setUser] = useState({"username" : "", "password" : ""});

    const handleModalFormClose = () => {
        setChildren(null);
        setOpenModal(false);
    };

    const handleUserChange = (event) => {
        const {currentTarget} = event;
        const {name, value} = currentTarget;
        setUser({...user, [name]: value});
    };

    const onSubmitUser = (event) => {
        event.preventDefault();
    };
    const showModalUser = (person) => {
        setMsgTitle("Ajout d'un utilisateur");
        let children = () => {
            return(
              <>
                  <p>Ajout de <strong>{person.fullName}</strong>  comme utilisateur</p>
                  <hr/>
                  <Field
                      name="username"
                      label="Nom utilisateur"
                      placeholder="Son identifiant de connexion"
                      type="text"
                      value={user.username}
                      onChange={handleUserChange}
                  />
                  <Field
                      name="password"
                      label="Mot de passe"
                      placeholder="Son mot de passe de connexion"
                      type="password"
                      value={user.password}
                      onChange={handleUserChange}
                  />
              </>
            );
        };
        setChildren(children());
        setOpenModal(true);
    };

    return (
        <>
            <div className="person">
                {persons.map(person =>
                    <div key={person.id} className="card person-card border-primary mb-2 ml-2">
                        <div className="card-header">
                            <span className="badge badge-primary">{person.civilityName}</span>
                        </div>
                        <div className="card-img mb-1">
                            <NavLink to={person.slug}>
                                <img className="card-img-top avatar" src={person.avatarUrl} alt="Image ou avatar"/>
                            </NavLink>
                        </div>
                        <div className="card-body">
                            <div className="full-name px-2">
                                <h5 className="card-title">{person.fullName}</h5>
                            </div>

                            <div className="card-text px-2 py-2">
                                <h6>
                                    Born on
                                    {moment(person.bornAt).format('ddd DD MMM YYYY')} at {person.birthPlace}, <span
                                    className="badge badge-success">{person.maritalStatusName}</span>
                                </h6>
                                <span className="badge badge-info">{person.age}</span>
                            </div>
                        </div>

                        <div className="card-footer">
                            <button
                                className="btn btn-primary mr-1 mb-2"
                            >
                                <i className="fas fa-edit">{}</i>
                            </button>
                            <button
                                className="btn btn-danger mr-1 mb-2"
                                onClick={() => handleDelete(person)}>
                                <i className="fas fa-trash">{}</i>
                            </button>
                            <div className="btn-group dropright mr-1 mb-2">
                                <button
                                    type="button"
                                    className="btn btn-info"
                                    onClick={() => showDetails(person)}>
                                    <i className="fas fa-info fa-1x">{}</i>
                                </button>
                                <button
                                    className="btn btn-sm btn-info dropdown-toggle"
                                    type="button" id="dropdownMenu2"
                                    data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div className="dropdown-menu" aria-labelledby="dropdownMenu2">
                                    <button className="dropdown-item" type="button"
                                            onClick={() => showDetails(person.id)}>Details
                                    </button>
                                    <button className="dropdown-item" type="button">
                                        { (person.hasFirstName) ? "Manage firstNames" : "L'ajouter un prénom" }
                                    </button>
                                    <button className="dropdown-item" type="button">
                                        {(person.hasEmail) ? "Gérer ses emails" : "Add email"}
                                    </button>
                                    <button className="dropdown-item" type="button">{(person.hasPhoneNumber) ? "Gérer ses contacts téléphoniques" : "New phone contact"} </button>
                                    <button className="dropdown-item" type="button">{(person.hasAddress) ? "Changer son adresse" : "New address"}</button>
                                    {!(person.hasValidIdentityCard) && <button className="dropdown-item" type="button">Change Identity Card <span className="badge badge-danger">invalid</span></button>}
                                    {!person.isUser && <button className="dropdown-item" type="button" onClick={() => showModalUser(person)}>Add as user</button>}
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>

           <ModalForm
                onShow={openModal}
                title={msgTitle}
                onClose={handleModalFormClose}
                onSave={onSubmitUser}
            >
                {children}
            </ModalForm>
        <>
    )
}

这是我的代码：ModalForm.jsx

import React from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

const ModalForm = ({onShow:onShow, onClose:onClose, title:title, onSave:onSubmit, children:children}) => {
    return (
        <Modal
            show={onShow}
            onHide={onClose}
            backdrop="static"
            keyboard={false}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <form onSubmit={onSubmit}>
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">{title}</Modal.Title>
                </Modal.Header>
                <Modal.Body style={{'maxHeight': 'calc(100vh - 210px)', 'overflowY': 'auto'}}>{children}</Modal.Body>
                <Modal.Footer>
                    <Button className="btn btn-info mr-2" onClick={onClose}><i className="fas fa-window-close">{}</i> Close</Button>
                    <Button type="submit" className="btn btn-success mr-2"><i className="fas fa-check-circle">{}</i> Save</Button>
                </Modal.Footer>
            </form>
        </Modal>
    );
};

export default ModalForm;

标签： javascriptreactjs