在 React 中提交表单后函数不返回组件

Question

我已经学习 React 几个星期了，我正在尝试创建一个显示表单的 React 应用程序，当提交时，它接受输入并创建一个 madlib 语句。但是，当我提交表单时，不会呈现 GenerateMadlib 组件。任何帮助表示赞赏！ ./Madlib.js

const Madlib = () => {
    const [formData, handleChange, resetFormData] = useFields({
        noun: '',
        noun2: '',
        adjective: '',
        color: ''
    })
    const handleSubmit = e => {
        e.preventDefault();
        resetFormData()
    }

    const generateMadlib = () => {
        console.log("This line runs");
        return <GenerateMadlib noun={formData.noun} noun2={formData.noun2} adjective={formData.adjective} color={formData.color} />
    }
    
    return (
        <div className="Madlibs">
            <h1>Madlibs!</h1>
            <form
            onSubmit={handleSubmit}>
                <input
                className="Madlibs-input"
                type="text" 
                name="noun" 
                value={formData.noun}
                placeholder="noun"
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="noun2" 
                value={formData.noun2}
                placeholder="nou2" 
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="adjective" 
                value={formData.adjective} 
                placeholder="adjective"
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="color" 
                value={formData.color}
                placeholder="color"
                onChange={handleChange}/>
                <button onClick={generateMadlib}>send</button>
            </form>
        </div>
    )
}

./GenerateMadlib.js

const GenerateMadlib = ({noun, noun2, adjective, color}) => {
    const madlib = Sentencer.configure({
        nounList: [noun, noun2],
        adjectiveList: [adjective, color]
    });
    return (
        <>
            <h1>Madlibs!</h1>
            <p>{madlib}</p>
        </>
    )
}

Answer 1

你想在哪里显示<Madlib /> 组件？按钮 onClick 回调函数无法返回组件，因为他们不知道在哪里显示返回的组件。在构建块时组合组件。虽然我还没有测试过，但下面的代码可以工作。

const Madlib = () => {
    const [show, setShow] = useState(false)
    const [formData, handleChange, resetFormData] = useFields({
        noun: '',
        noun2: '',
        adjective: '',
        color: ''
    })
    const handleSubmit = e => {
        e.preventDefault();
        setShow(true)
        resetFormData()
    }
    
    return (
        <div className="Madlibs">
            <h1>Madlibs!</h1>
            <form>
                <input
                className="Madlibs-input"
                type="text" 
                name="noun" 
                value={formData.noun}
                placeholder="noun"
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="noun2" 
                value={formData.noun2}
                placeholder="nou2" 
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="adjective" 
                value={formData.adjective} 
                placeholder="adjective"
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="color" 
                value={formData.color}
                placeholder="color"
                onChange={handleChange}/>
                <button onClick={handleSubmit}>send</button>
            </form>
            {show && <GenerateMadlib noun={formData.noun} noun2={formData.noun2} adjective={formData.adjective} color={formData.color} />}
        </div>
    )
}

或者您可能想使用 react-router-dom 进行重定向。

Answer 2

从onClick 回调返回组件不会将该组件附加到 DOM。只有从功能组件返回的内容才会附加到 DOM。因此，您应该创建一个包含所有生成的表单的数组或一个包含当前生成的表单的值，并通过 JSX 呈现该数组。

const Madlib = () => {
    const [formData, handleChange, resetFormData] = useFields({
        noun: '',
        noun2: '',
        adjective: '',
        color: ''
    })
    const [currentForms, setCurrentForms] = useState([])

    const handleSubmit = e => {
        e.preventDefault();
        resetFormData()
    }

    const generateMadlib = () => {
        console.log("This line runs");
        setCurrentForms(
            currentForms.push(
                (<GenerateMadlib noun={formData.noun} noun2={formData.noun2} adjective={formData.adjective} color={formData.color} />)
            )
        ) //? This updates state and re-renders with new forms
    }

    var currentForms = []
    
    return (
        <div className="Madlibs">
            <h1>Madlibs!</h1>
            <form
            onSubmit={handleSubmit}>
                <input
                className="Madlibs-input"
                type="text" 
                name="noun" 
                value={formData.noun}
                placeholder="noun"
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="noun2" 
                value={formData.noun2}
                placeholder="nou2" 
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="adjective" 
                value={formData.adjective} 
                placeholder="adjective"
                onChange={handleChange}/>
                <input
                className="Madlibs-input"
                type="text" 
                name="color" 
                value={formData.color}
                placeholder="color"
                onChange={handleChange}/>
                <button onClick={generateMadlib}>send</button>
            </form>
            {currentForms}
        </div>
    )
}

注意：我没有测试过这段代码，所以它可能有错误