表单提交事件的Typescript类型

Question

据说我应该在表单中使用FormEvent来处理submit事件类型。

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/

然而这种类型无法识别值的数组。它只能识别单个值(例如，e.target.value而不是e.target[0].value)。

我应该在表单中使用哪种类型的提交函数，以便我可以迭代我的表单值？

import * as React from 'react';
import {ChangeEvent, FormEvent, useState} from "react";

export default function Test() {

    const [input1, setInput1] = useState<string>();
    const [input2, setInput2] = useState<string>();

    return (
        <div>
            {/*//TODO what should 'e' type be??*/}
            <form id="myform" onSubmit={(e: FormEvent<HTMLFormElement>) => {
                e.preventDefault();
                console.log(e.target && e.target.length ? e.target[0].value : "nothing here..")
            }}>
                <input type={"textfield"} id="1" value={input1}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setInput1(e.target.value)}
                />
                <input type={"textfield"} id="2" value={input2}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setInput2(e.target.value)}
                />
            </form>
        </div>
    );
}

- Oliver Watkins

Answer 1

' e '类型应该是什么？使用 FormEvent<HTMLFormElement> 是可以的，但是你也可以完全省略它（我建议这样做）- 无需注释 TS 可以自动推断的类型。不必要时少编写代码通常意味着减少笔误的可能性、减少需要解决的难题，并且更易读，因为没有大量引起注意力分散的模板代码。

它只识别一个值（即 e.target.value 而不是 e.target[0].value）。

这是可以预期的 - .target 是事件分派到的元素，在本例中是表单。它不是一个数组。

如果您想要迭代所有输入值，那么请分别为它们使用不同的状态，然后像您当前正在执行的那样仅记录每个状态（并确保为状态提供初始字符串值，而不是初始未定义值）。

const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
// ...
console.log(input1);
console.log(input2);

或者，如果输入数量是动态的，可以构造一个字符串数组来代替状态。

const [inputValues, setInputValues] = useState(['']); // start with a single input

// to update the input at index i, like inside a map function in the returned JSX:
(e) => {
  setInputValues(
    inputValues.map((val, j) => j === i ? e.target.value : val)
  )
}

- CertainPerformance

Answer 2

我用这个来进行普通的提交。

import { SyntheticEvent } from 'react';

const _onSubmit = (e: SyntheticEvent) => {}

但是当我想要获取提交者时，我使用这个：

const _onSubmit = (e: SyntheticEvent<HTMLFormElement, SubmitEvent>) => {}

- Loscho19

---

你的回答可以通过添加更多关于代码的功能和如何帮助提问者的信息来改进。 - Tyler2P

Answer 3

最新的React中，类型似乎应该是e: SubmitEvent。

- OZZIE