reactjs - 使用没有状态的输入标签反应展示(无状态)组件?
问题描述
我正在尝试遵循一个简单的演示模型,即它没有状态。
问题是,如果我使用输入标签或其他表单控件,该组件更新自身的唯一方法是使用状态 - 这是正确的吗?
这意味着,任何只有 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 来获取 input 的当前值,而不是为其维护 aa 状态。
推荐阅读
- python-3.x - 如何在 Windows 上安装 ELKI?
- typescript - TypeScript Partial of Union 抱怨分配联合值
- asp.net - 如何摆脱经常出现的git错误:补丁失败/补丁不适用?
- apache-kafka - 为什么我无法在 Kafka 中获得即时/实时当前偏移量?
- azure - 当用于 Blob 存储的 Azure REST API 使用具有前缀或标记的查询字符串时获取 403
- java - 制作一个字符串行计算器
- excel - 忽略存在值的行的数组公式
- firebase - 您可以在 Firebase 上使用不同帐户测试多台设备吗?
- gridsearchcv - 带有 ALS 算法的 GridSearchCV
- python - 计算数字列表中的相似元素