表单提交事件的打字稿类型

Question

据说我应该使用FormEvent作为表单中的提交事件类型。

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>
    );
}

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)
  )
}

Answer 2

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