在React js/Typescript中，如何在不使用onChange的情况下获得输入标记onSubmit的值

Question

我没有其他特殊的onChange事件，所以我需要通过只处理Form标记上的onSubmit事件来简化代码。

我正在React中的Typescript中创建一个简单的表单，当我单击Submit时，我想记录控制台中输入框的值。但当我这样做的时候，我会出错。

import React from "react";
const handleSubmit =(event:React.FormEvent<HTMLFormElement>) =>{
event.preventDefault();
console.log(event.currentTarget[0].value);
};
export const InputForm: React.FC  = () =>{
return (
<form className='form-container' onSubmit={handleSubmit}>
<input className="input" placeholder="Enter value" required />
<button type="submit">Enter</button>
</form>  
)
}

我对这句话的推理=>console.log(event.currentTarget[0].value);是表单标记有两个元素，input和button，因此event.currentTarget[0]单独返回控制台中的input标记，但当我尝试添加.value时，它传递了一个错误(属性"value"在类型"Element"上不存在。ts(2339((

Answer 1

这里通常使用受控组件，但您说过不想这样做。

问题是event.currentTarget[0]只是类型Element，而Element没有value(它只是在某些元素上，如HTMLInputElement、HTMLSelectElement等(

您知道它是一个带有value的Element子类型，但TypeScript没有，因为并非所有表单控件元素都有value(首先，fieldset和object没有，但它们被算作表单元素(。

您可以在工具箱中放入一个实用程序断言函数：

function assertIsFormFieldElement(element: Element): asserts element is HTMLInputElement | HTMLSelectElement | HTMLButtonElement {
// Customize this list as necessary −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
if (!("value" in element)) {
throw new Error(`Element is not a form field element`);
}
}

然后使用它：

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) =>{
event.preventDefault();
const firstField = event.currentTarget[0];
assertIsFormFieldElement(firstField);
console.log(firstField.value);
};

游乐场链接

---

旁注：如果你要这样做，你可能会考虑在输入上放一个name，并在查找元素时使用它，而不是假设input将是第一个元素：

<input name="the-name" className="input" placeholder="Enter value" required />

然后，您可以使用实用程序函数从表单中获取命名项目：

function getFormControl(form: HTMLFormElement, name: string): HTMLInputElement | HTMLSelectElement | HTMLButtonElement /* | ...*/ {
const control = form.elements.namedItem(name);
if (!control || control instanceof RadioNodeList || !("value" in control)) {
throw new Error(`Form control "${name}" not found or was a RadioNodeList`);
}
return control;
} 
// ...

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) =>{
event.preventDefault();
const inputField = getFormControl(event.currentTarget, "the-name");
console.log(inputField.value);
};

游乐场链接