Question

我正在做出多阶段反应。总体组件依赖关系结构如下：

MainForm
- SubForm1
- SubForm2
- SubForm3

MainForm组件具有两个分别称为step和formData的状态，以及一个称为handleNext，handleBack的方法，它们修改状态step。它还有一个名为handleChange的方法，该方法从SubForm*中存在的输入字段中读取值，并更新状态formData，以便在单击并再次单击时，formData保持在那里，直到进行了最终的API调用为止。在最后一个SubForm3上进行。在其上卸载MainForm组件。 MainForm使用状态为step作为决策变量的情况下，使用切换大小写来呈现特定的SubForm。

我将以下内容作为道具传递给SubForms：

formData
handleNext
handlePrev
handleChange

在SubForm1中，我有以下代码段：

import React from 'react';
const SubForm1 = ({
    formData,
    handleNext,
    handlePrev,
    handleChange,
}) => {
    const FormInput = ({ attr }) => <input name={attr} onChange={handleChange} value={formData[attr]} />;

    return (
        <FormContainer>
            <form>
                  <input name='fullName' onChange={handleChange} value={field_values.fullName} />
                  <FormInput attr="employee_id" />
            </form>
            <button onClick={prevStep}>Back</Button>
            <button onClick={nextStep}>Next</button>
        </FormContainer>
      );
}

handleChange方法通过onChange事件捕获用户输入，并更新相应的字段。在MainForm.jsx中将其声明为：

// MainForm.jsx
import React, { useState } from 'react';

const MainForm = () => {

    const [step, setStep] = useState(0);
    const [formData, setFormData] = useState({ fullName: '', employee_id: '' });

    const handleChange = (event) => {
        event.preventDefault();
        event.persist();
        setFormData(prevState => ({
                ...prevState,
                [event.target.name]: event.target.value,
        }));
    };

    const handleNext = () => {
        setStep(old => (old + 1));
    };

    const handleBack = () => {
        setStep(old => (old - 1));
    };

它在输入字段（fullName）中正常运行-值随着用户的输入而更新，并且遍历子表单时formData状态保持不变。

但是对于employee_id输入，会发生以下情况：

在employee_id输入字段中输入了一个字符。
employee_id输入字段立即失去焦点。
用户必须再次单击employee_id输入字段才能获得焦点（当然，如果没有此字段，他/她将无法在该字段中键入内容）
转到步骤1。

但是状态formData已更新，因为在转到下一个/上一个子窗体时，状态formData保持不变。

我觉得这与声明FormInput组件的方式有关。我不是从SubForm1传递handleChange作为它的道具，而是依靠范围。

经过大量的搜索，我无法得到我的问题的答案，因为搜索引擎将我的问题与与任何包含“在另一个组件中声明一个组件”的查询有关的组件组成的答案相混淆。

PS。我对JavaScript和JavaScript还是比较陌生，所以请随时提出实现上述目标的更好方法。我们非常感谢您的帮助。

Answer 1

有时event.persist();引起了问题。如果要使用event.target.name和event.target.value，则只需创建两个变量即可存储这些值。并删除event.persist()。

只需尝试以下代码：

 const handleChange = (event) => {
    event.preventDefault();
    // event.persist(); //comment out this line
    const name = event.target.name;
    const value = event.target.value;

    setFormData(prevState => ({
            ...prevState,
            [name]: value,
    }));
};

道具在另一个组件内部声明的组件使用时如何工作？

1 个答案: