reactjs - 反应状态值调用
问题描述
我想创建一个表单并保存一些值。我有这个构造函数代码:
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);}
并具有handleChange功能:
handleChange(event) {
this.setState({value: event.target.value});}
并具有handleSubmit 功能:
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();}
handleSubmit 函数有错误:
类型“{}”.ts(2339) 上不存在属性“值”。
如何解决它?
这是完整的代码:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
解决方案
由于您使用的是打字稿,因此您需要做这样的事情。看看这个 stackBlitz
https://stackblitz.com/edit/react-ts-gfcdog
import React from "react";
interface State{
value? : string
}
export default class NameForm extends React.Component<{},State> {
constructor(props: any) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event: any) {
this.setState({ value: event.target.value });
}
handleSubmit(event: any) {
alert("A name was submitted: " + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
推荐阅读
- c++ - 插入功能不会添加新元素
- c# - C# linq 查询聚合可为空的布尔值
- excel - 如何在更改单元格颜色或以特定间隔自动计算工作表?
- excel - How do I sum a variable range?
- typescript - 如何创建自定义色标?
- python - python selenium webdriver在登录网站时获取httpStatusCode 503
- xquery - XQuery 中的复杂类型检查
- c - 根据上下文指向内存中的函数 - 多态性
- python - 如何在 scikit-learn 中正确执行交叉验证?
- reactjs - React Navigation v3 - 选项卡图标 - 问号而不是图标