[英]What am i doing wrong? TypeError: this is undefined
I'm creating simple form with a React component to send via axios.post
, so I'm trying to capture the input data but for some reason I get a 我正在创建一个带有React组件以通过
axios.post
发送的简单表单,因此我试图捕获输入数据,但是由于某种原因,我得到了一个
this is undefined
这是未定义的
when trying to change the state. 尝试更改状态时。
I wrote name: 'hello', to just change the state to something an visualize in the form if it is working. 我写了一个名字:“ hello”,只是将状态更改为可视化的形式(如果可以)。 Same as 'TryDescription'.
与“ TryDescription”相同。
export default class Posts extends Component {
constructor(props){
super(props);
this.state = {
error: null ,
posts: [],
isLoaded: false,
name : null,
description: null,
}
}
static handleSubmit(event){
event.preventDefault();
console.log('hello');
};
handleInputchange(event){
console.log(event.target.value);
this.setState({
error : null ,
posts: [] ,
isLoaded:false,
name:'Hello',
description: 'TryDescription',
})
};
render() {
const { error, isLoaded, posts , name , description } = this.state;
return (
<div className="container">
<form onSubmit={Posts.handleSubmit}>
<div className="form-row">
<div className="form-group col-md-6">
<label htmlFor="name">Name</label>
<p>The name is:{name} </p>
<input onChange={this.handleInputchange} type="text" name='name' className="form-control" id="name" placeholder="Tittle"/>
</div>
<div className="form-group col-md-6">
<label htmlFor="description">Description</label>
<p>The description is:{description} </p>
<input onChange={this.handleInputchange} name="description" type="text" className="form-control" id="description" placeholder="Description"/>
</div>
</div>
<button type="submit" className="btn btn-primary">Create</button>
</form>
<div className="row">
{posts.map((post) =>
<div className="col-3" key={post.id} >
<div className="card" style={{width: 18 + 'rem'}}>
<div className="card-body">
<h5 className="card-title">{post.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">Subtítulo</h6>
<p className="card-text">{post.description}</p>
<a href="#" className="card-link">Card link</a>
<a href="#" className="card-link">Another link</a>
</div>
</div>
</div>
)}
</div>
</div>
)
}
I would expect that doing: 我希望这样做:
this.setState({
error : null ,
posts: [] ,
isLoaded:false,
name:'Hello',
description: 'TryDescription',
})
name takes the 'Hello' string value but nothing. 名称采用“ Hello”字符串值,但不包含任何值。
You need to bind this
to your handleInputchange
function, 您需要
this
绑定到handleInputchange
函数,
this.handleInputchange = this.handleInputchange.bind(this); //Add this in your constructor
Another issue with your code is, 您的代码的另一个问题是,
<form onSubmit={Posts.handleSubmit}>
Don't write such event, you just need to do this, 不要编写此类事件,您只需要这样做,
<form onSubmit={this.handleSubmit}>
And your handleSubmit
function should be only this, 而且您的
handleSubmit
函数应该只是这个,
handleSubmit(event){
event.preventDefault();
console.log('hello');
};
Again you need to bind this
to handleSubmit
function, 同样,您需要
this
绑定到handleSubmit
函数,
this.handleSubmit = this.handleSubmit.bind(this); //Add this in your constructor
Or, another way is declare your functions using arrow function notation, 或者,另一种方法是使用箭头函数符号声明您的函数,
handleSubmit = (event) => {
event.preventDefault();
console.log('hello');
};
handleInputchange = (event) => {
console.log(event.target.value);
this.setState({
error : null ,
posts: [] ,
isLoaded:false,
name:'Hello',
description: 'TryDescription',
})
};
In this case you don't need to bind this
to your function's. 在这种情况下,您无需
this
绑定到您的函数。
You should bind handleInputchange
function in contructor
您应该在
contructor
函数中绑定handleInputchange
函数
constructor(props){
super(props);
this.state = {
error: null ,
posts: [],
isLoaded: false,
name : null,
description: null,
}
this.handleInputchange = this.handleInputchange.bind(this)
}
Binding the State would fix the issue. 约束国家将解决此问题。 Remember, you have to do the binding inside the constructor .
记住,您必须在构造函数中进行绑定。 The modification can be done with '.bind(this)' as below.
可以使用“ .bind(this)”进行如下修改。
this.handleInputchange = this.handleInputchange.bind(this);
And finally your constructor should look like this: 最后,您的构造函数应如下所示:
constructor(props){
super(props);
this.state = {
error: null ,
posts: [],
isLoaded: false,
name : null,
description: null,
}
this.handleInputchange = this.handleInputchange.bind(this);
}
You can use the arrow function here. 您可以在此处使用箭头功能。 that will help you to fix the error.
这将帮助您解决错误。 something like this:
像这样的东西:
handleInputchange = (event) => {
// write logic
}
Good Luck. 祝好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.