三元组在 React 中切换相同按钮组件导致表单提交的奇怪行为

Question

当我们在 React 表单中使用三元组将带有

type="button"

的按钮替换为带有

type="submit"

的按钮时，换入的按钮会导致表单提交。

import {useState} from "react";


function App() {
    const [isClicked, setIsClicked] = useState(false);
    const handleClick = () => {
        setIsClicked(true)
    };

    return (
        <form action='/submitted'>
            <div>
                <label htmlFor="firstName">First Name</label>
                <input id="firstName" name="firstName" placeholder="John"/>
            </div>
            <div>
                <label htmlFor="lastName">Last Name</label>{' '}
                <input id="lastName" name="lastName" placeholder="Doe"/>
            </div>
            {isClicked
                ? <button type="submit">Submit</button>
                : <button type="button" onClick={handleClick}>Click Me</button>}
        </form>
    )
}

export default App

但是如果我们将三元拆分成两个条件，则表单将不会被提交

import {useState} from "react";


function App() {
    const [isClicked, setIsClicked] = useState(false);
    const handleClick = () => {
        setIsClicked(true)
    };

    return (
        <form action='/submitted'>
            <div>
                <label htmlFor="firstName">First Name</label>
                <input id="firstName" name="firstName" placeholder="John"/>
            </div>
            <div>
                <label htmlFor="lastName">Last Name</label>
                <input id="lastName" name="lastName" placeholder="Doe"/>
            </div>
            {isClicked ? <button type="submit">Submit</button> : null}
            {!isClicked ? <button type="button" onClick={handleClick}>Click Me</button> : null}
        </form>
    )
}

export default App

另外，如果交换的组件不是同一组件类型，则不会提交。

import {useState} from "react";

const SubmitButton = () => <button>Submit</button>;

function App() {
    const [isClicked, setIsClicked] = useState(false);
    const handleClick = () => {
        setIsClicked(true)
    };

    return (
        <form action='/submitted'>
            <div>
                <label htmlFor="firstName">First Name</label>
                <input id="firstName" name="firstName" placeholder="John"/>
            </div>
            <div>
                <label htmlFor="lastName">Last Name</label>
                <input id="lastName" name="lastName" placeholder="Doe"/>
            </div>
            {isClicked
                ? <SubmitButton/>
                : <button type="button" onClick={handleClick}>Click Me</button>}
        </form>
    )
}

export default App

我猜 React 试图在这里做一些聪明的事情，但是谁能解释为什么会发生这种情况？

Answer 1

您可以使用 React key 属性解决此问题。 React 使用此属性来跟踪组件树中同一级别的元素。

import {useState} from "react";


function App() {
    const [isClicked, setIsClicked] = useState(false);
    const handleClick = () => {
        setIsClicked(true)
    };

    return (
        <form action='/submitted'>
            <div>
                <label htmlFor="firstName">First Name</label>
                <input id="firstName" name="firstName" placeholder="John"/>
            </div>
            <div>
                <label htmlFor="lastName">Last Name</label>{' '}
                <input id="lastName" name="lastName" placeholder="Doe"/>
            </div>
            {isClicked
                ? <button key="submit" type="submit">Submit</button>
                : <button key="button" type="button" onClick={handleClick}>Click Me</button>}
        </form>
    )
}

export default App