Javascript 是否可以自动完成分为不同步骤的表单的所有字段？

我有一个分为不同步骤/页面的表单，但我希望在第一步的第一个字段中选择此选项时自动完成所有字段。例如，我有3个不同的页面：名字和姓氏、电子邮件地址和电话号码，它们都包装在同一个表单标签中，每个输入都包含正确的自动完成属性。但是，当我单击自动填充（浏览器的建议）名字时，它适用于姓氏，因为它们位于同一页面中，但不适用于其他字段（电子邮件和电话号码），因为它们位于流程中的不同页面/步骤中。对于他们，我必须在字段中单击，然后（再次）在浏览器的建议中单击

那么，当我的表单中有不同的步骤时，是否可以使用自动完成功能填充所有字段

我找了很多，但没有找到任何解决办法

这种形式的一个小例子：

<form onSubmit={submit}>
    {step === NAME && (
    <>
        <InputBox
            isRequired
            name="firstName"
            autoComplete="given-name"
            label="First name"
            onBlur={onInputBlur}
            onChange={onInputChange}
            value={firstName}
        />
        <InputBox
            isRequired
            name="lastName"
            autoComplete="family-name"
            label="Last name"
            onBlur={onInputBlur}
            onChange={onInputChange}
            value={lastName}
        />
        <Button type="button" onClick={() => this.setState({step: EMAIL})}>
            Next
        </Button>
    </>
    )}
    {step === EMAIL && (
    <>
        <InputBox
            isRequired
            name="email"
            autoComplete="email"
            label="Email"
            onBlur={onInputBlur}
            onChange={onInputChange}
            value={email}
        />
        <Button type="button" onClick={() => this.setState({step: PHONE})}>
            Next
        </Button>
    </>
    )}
    {step === PHONE && (
    <>
        <InputBox
            isRequired
            name="phoneNumber"
            autoComplete="tel"
            label="Phone number"
            onBlur={onInputBlur}
            onChange={onInputChange}
            value={phoneNumber}
        />
        <Button type="submit">
            Submit
        </Button>
    </>
    )}
</form>

{步骤===名称&&(
this.setState（{step:EMAIL}}>
下一个
)}
{步骤===电子邮件&&(
this.setState（{step:PHONE}}>
下一个
)}
{步骤===电话&&(
提交
)}