- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找使用 TypeScript 在 React 中管理表单状态的最佳方法。我的简单表单有两个值:login
和 password
领域。我实现 IState
表单状态和 DRY 的接口(interface) handleChange
在状态中存储新值而不在每个 render()
中重新创建函数的方法执行。
interface IState {
login: string;
password: string;
}
class LoginForm extends React.Component<{}, IState> {
public state = {
login: "",
password: "",
};
public render() {
const { login, password } = this.state;
return (
<form>
<input name="login" value={login} onChange={this.handleChange}/>
<input name="password" value={password} onChange={this.handleChange} type="password"/>
</form>
);
}
private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
const { name, value } = e.currentTarget;
const n = name as keyof IState;
// @ts-ignore
this.setState({
[n]: value,
});
}
}
name
商店字段名称的属性。
n
变量将只有
login
或
password
值(value)。任何其他值都是不可能的。我可以告诉 TypeScript
n
变量是
"login" | "password"
文字类型? TypeScript 方面
n
如
string
即使我使用类型变量:
const n = name as keyof IState;
const n = name as "login" | "password";
// @ts-ignore
我得到错误:
Type error: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'IState | Pick<IState, "login" | "password"> | ((prevState: Readonly<IState>, props: Readonly<IProps>) => IState | Pick<IState, "login" | "password"> | null) | null'.
Type '{ [x: string]: string; }' is missing the following properties from type 'Pick<IState, "login" | "password">': login, password TS2345
const n = "login";
"login" | "password"
输入到
n
多变的?或任何其他 DRY 解决方案
handleChange
没有优化问题和纯 TypeScript?
最佳答案
我们可以使用 Pick
确保您设置的 key 已在 IState
中定义界面。
private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
const { name, value } = e.currentTarget;
this.setState({
[name]: value
} as Pick<IState, keyof IState>);
};
Partial
这将使您的所有状态键可选。
class App extends React.Component<{}, Partial<IState>> {
// ... rest of component
}
关于reactjs - React 和 TypeScript 中的表单,带有 DRY 更改句柄,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54493511/
我是 DRY principle 的坚定拥护者: Every piece of knowledge must have a single, unambiguous, authoritative rep
假设我有一个稍微复杂的 for 循环,用于不同的情况。有没有一种方法可以提取该 forloop 并仍然保持代码可读性? 例如: private function bar(){ for(i=0;
JSData 是替代还是补充 Sequelize.js? 我试图了解这两个库如何一起玩以及是否应该一起玩。 从我的阅读来看,JSData 主要处理访问数据,而 Sequelize.js 将创建和修改
我有 aws-eks 集群,下面是我替换现有配置的命令。 kubectl create configmap flink-config --from-file=./config -o yaml --dr
我正在设计一个可重用的类库,其中包含 2 个名为 core.xml.dll 和 core.string.dll 的程序集(其中包括)。 xml 程序集引用字符串程序集,以便使用一些字符串辅助方法。 但
我正在尝试找到一种更 DRY 的方式来使用 docker-compose env。 docker-compose-base.yml base: image: reactjs_web v
我有一些看起来像这样的类(class): struct A { void *stuff; int x; int foo() const; } 我有一些采用这种类型参数的函数,例如 int
我目前正在 Silverlight 中构建一些自定义控件。我希望这些控件能够响应验证错误。我想要做的是在我的控件周围设置红色边框,就像默认的 Silverlight 控件一样。 我的理解是我需要将它添
我正在处理一些服务器端代码,在将它们传递给客户端之前包装所有异常,因此所有面向客户端的方法都有以下代码 try{ DoSomething(); } catch (ExceptionA e) {
“纵深防御”原则指出,应该在多个地方实现约束,这样如果一条数据绕过或漏过一层,就会在下一层被捕获。一个很好的例子是在网络应用程序中——你将验证放在客户端 javascript 中,放在服务器端代码中(
使用这种方法在 MVC 中查看模型:http://www.lostechies.com/blogs/jimmy_bogard/archive/2009/06/29/how-we-do-mvc-view
我想将 jquery 脚本优化为多个元素(单个页面上有许多幻灯片)。我可以添加一些功能,但这并不干燥(不要重复自己)。 Pr
我有一些代码(不是我的),其中包含带有声明的范围映射的指令。我的愿望是在其他地方使用该指令并传递将在模板中使用的附加变量。 我要传递的变量是theVar。 我发现唯一可行的解决方案看起来很噩梦:
我将数据存储在数组中,并从该数组中使用循环创建表。对于一个表,我需要两列,另外 30 列(取决于数组项)。这将有三列。 var prodej = [ /*First column, second,
有没有更好的方法来声明来自同一组(例如“com.android.support”)具有相同版本(例如“23.4.0”)的多个软件包(例如“appcompat-v7”)? 实际申报: ... def a
我有一个看起来像这样的对象: var myObj = { _fooCon: function(f) { if (typeof f != 'function') throw
这就是我所拥有的。 Map data = new HashMap<>(); // assume this has been populated public int getLastestVersion
我在尝试维护 DRY 概念时遇到了 AngularJS 的问题 [不要重复自己]。我希望我做错了什么,有人可以指出我的错误。 一家公司销售卡车和汽车。 这两个项目具有相似和不同的属性。添加到其中一种的
我最终在几个类中得到了几个遵循相同模式的方法(每个类中总是有一堆这些方法): private void updateFoo() { String newFoo = fooTextField.g
假设我有一个字典config,其中包含键username和password。我想创建一个新字典,仅包含 config 中的username 和 password 键值对。一种方法是: new_dict
我是一名优秀的程序员,十分优秀!