>我正在尝试遵循一个简单的表示模型，即它没有状态。
问题是，如果我使用 Input 标签或其他表单控件，该组件更新自身的唯一方法是使用 state - 这是正确的吗？
这意味着，任何只有 1 个输入标签的组件都将被迫成为有状态组件而不是无状态组件 - 只是因为 react 的工作方式以及在用户键入时更新输入标签的方式。
有没有其他选择？
虽然我正在使用更干净的钩子，并允许我通过使用"useState"来使用功能组件 - 它仍然是有状态的。
现在钩子出现了 - 我们是说所有功能组件都可以保持状态吗？这似乎不对。
或者只是由于 react 的工作方式，任何具有输入标签的组件都会自动成为有状态组件？
当然，我能做的是通过 props 传递默认值并将值传递给更高的组件(我真正的有状态组件( - 但这似乎还有很长的路要走。
我希望对实现具有输入标签的无状态组件的方法有一些见解 - 或者我们应该始终将值传递回父组件，或者当组件具有输入标签时，我们会存储最小状态(例如使用 useState， 在钩子中(
有什么想法吗？
使用不受控制的组件
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
它们使用 refs 来获取输入的当前值，而不是为其维护状态。
与其在组件中管理该输入，不如向其传递回调，例如 redux 存储或类似内容。这样，表单组件与该输入背后的逻辑分离，并成为简单的表示组件：
const Form = callback => {
const inputRef = React.createRef();
const handleInput = event => {
event.preventDefault();
callback(inputRef.current.value);
};
return (
<form onSubmit={handleInput}>
<input type="text" ref={inputRef} />
<button>Submit</button>
</form>
);
};
export default Form;