react-modal

Question

希望您能帮我解答我的问题。我正在使用 react-modal 并且在模式中我有一个输入，用户可以在其中写一封电子邮件。在写电子邮件时，它应该更新状态，但没有发生。

现在发生的情况是，每次我写一个新字母时模型都会重新渲染，导致状态只更新我输入的第一个字母，然后焦点丢失。

我正在使用反应挂钩。我知道这有点变化。

我的代码如下所示：

    import React, { useState, useContext } from 'react';
import AppContext from '../../AppContext.jsx';
import GroupContext from './GroupContext.jsx';
import Section from '../../Elements/PageContent/Section.jsx';
import PageTitle from '../../Elements/PageContent/PageTitle.jsx';
import WhiteContainer from '../../Elements/PageContent/WhiteContainer.jsx';
import { Form, FormGroup, FormSection, FormSection_Split, Label, Input, Select, Submit } from '../../Elements/Forms/FormCollection.jsx';
import { MusicGenres } from '../../Elements/Forms/MusicGenres.jsx';
import { Years } from '../../Elements/Forms/Years.jsx';
import { H3 } from '../../Elements/Fonts/FontCollection.jsx';
import { Icon } from '../../Elements/Image/ImageUtil.jsx';
import ReactModal from "react-modal";
import { useModal } from "react-modal-hook";

export default function Groups(props) {  
    const AC = useContext(AppContext);
    const GC = useContext(GroupContext);
    const [groupName, setGroupName] = useState("");
    const [groupDescription, setGroupDescription] = useState("");
    const [memberEmail, setMemberEmail] = useState("");
    const [groupMembers, setGroupMembers] = useState([]);
    const [showModal, hideModal] = useModal(() => (
        <ReactModal className="DialogPopup" isOpen ariaHideApp={false}>
            <Form>
                <FormGroup>
                    <FormSection>
                        <Label htmlFor="memberEmail" title="Email of your group member:" />
                        <Input type="email" name="memberEmail" value={memberEmail} onChange={(e) => setMemberEmail(e.target.value)} placeholder="@" />
                    </FormSection>
                </FormGroup>
            </Form>
            <button onClick={(e) => hideModal()} className="Close" aria-label="Close popup"><Icon iconClass="fal fa-times" /></button>
        </ReactModal>
    ), []);

    async function addObjectToGroupMembersArray(e) {
        e.preventDefault();
        console.log("Adding member");
    }

    return (
        <React.Fragment>
            <PageTitle title="Add group" />
            <Section>
                <Form>
                    <FormGroup>
                        <FormSection>
                            <WhiteContainer>
                                <Label htmlFor="groupName" title="Group name:" />
                                <Input type="text" name="groupName" value={groupName} onChange={(e) => setGroupName(e.target.value)} maxLength="60" required />
                                <span className="CharactersLeft">Characters left: {60 - groupName.length}</span>
                            </WhiteContainer>
                        </FormSection>
                        <FormSection>
                            <WhiteContainer>
                                <Label htmlFor="groupDescription" title="Describe your group:" />
                                <textarea name="groupDescription" id="groupDescription" value={groupDescription} onChange={(e) => setGroupDescription(e.target.value)} maxLength="500"></textarea>
                                <span className="CharactersLeft">Characters left: {500 - groupDescription.length}</span>
                            </WhiteContainer>
                        </FormSection>
                        <FormSection>
                            <WhiteContainer>
                                <Label htmlFor="groupMembers" title="List the emails of your group members?" />
                                <a href="#" className="AddLink" aria-label="Add member" title="Click to add a member" onClick={(e) => { e.preventDefault(); showModal(); }}>
                                    <Icon iconClass="fal fa-plus" />
                                </a>
                            </WhiteContainer>
                        </FormSection>
                        <FormSection className="FormSection--Submit">
                            <Submit text="Create group" />
                        </FormSection>
                    </FormGroup>
                </Form>
            </Section>
        </React.Fragment>
    );
}

你们有没有人知道为什么我每次输入时模态框都在更新，导致无法在输入中写入任何内容。我应该使用 "ref" 吗？如果应该，我该怎么做？

我使用的 onChange 方法一直有效，只是不在 react-modal 内。

Answer 1

如何创建一个您将在 onChange 中调用的外部函数？

类似于：


const handleOnChange = (event) => {
   setMemberEmail(event.target.value);
}

// then call it in your component
<Input type="email" name="memberEmail" value={memberEmail} onChange={handleOnChange} placeholder="@" />

Answer 2

我终于明白了。这是因为模态的工作方式有点像 useEffect 钩子。如果我将 memberEmail 添加到模态状态的底部，那么它正在工作。

const [memberEmail, setMemberEmail] = useState("");
    const [showModal, hideModal] = useModal(() => (
        <ReactModal className="DialogPopup" isOpen ariaHideApp={false}>
            <Form>
                <FormGroup>
                    <FormSection>
                        <Label htmlFor="memberEmail" title="Email of your group member:" />
                        <Input type="email" name="memberEmail" value={memberEmail} onChange={(e) => setMemberEmail(e.target.value)} placeholder="@" />
                    </FormSection>
                </FormGroup>
            </Form>
            <button onClick={(e) => hideModal()} className="Close" aria-label="Close popup"><Icon iconClass="fal fa-times" /></button>
        </ReactModal>
    ), [memberEmail]);

react-modal - 输入时的 onChange 不更新状态

react-modal - onChange on input is not updating state

javascript

reactjs

onchange