在这个基本的 react 应用程序中，为什么自定义组件"TextInput"允许我输入内容，即使常规的"输入"字段没有？

Question

我目前正在测试一个基本的react表单。它仍然不完整，但我发现了意想不到的行为。

常规输入字段不允许我输入任何内容，因为我还没有更新状态。然而，我的自定义TextInput组件确实允许我键入内容…令人惊讶的是，正如我之前所说，我还没有使用setValues来更新状态。

import React, { useState } from 'react';

const App = () => {
const [values, setValues] = useState({
firstName: '',
lastName: ''
});

return (
<div>
<form>
{/* [EXPECTED]  this doesn't allow anything to be typed in at the front-end... which is expected...
... as I am not using `setValues` to update the state yet */}
<input
type="text"
id="first-name"
name="firstName"
value={values.firstName}
/>
{/* [NOT EXPECTED] this does allow stuff to be typed in at the front-end... which is strange...
... as I am not using `setValues` to update the state yet */}
<TextInput
id="last-name"
name="lastName"
value={values.lastName}
/>

<button type="submit">
Register
</button>
</form>
</div>
);
};

const TextInput = props => {
return (
<input
type="text"
id={props.id}
name={props.name}
/>
/* <span id={props.id + '-error'}>{props.title}</span> */
);
};

export default App;

有人能帮我解释一下为什么有区别吗？

Answer 1

您的第一个输入是由控制的-它有一个value道具，用于确定元素在渲染时的值：

<input
type="text"
id="first-name"
name="firstName"
value={values.firstName}
/>

无论你在里面键入什么，因为它是"；"受控"；，其中存在的值将始终是当前处于CCD_ 4状态的值。

相反，您的第二个输入是不受控制的。它没有value道具：

<input
type="text"
id={props.id}
name={props.name}
/>

因此，由于在渲染时没有给React任何关于其值应该是什么的指令，因此可以在其中键入任何您想要的内容，它不会与React状态冲突。