javascript – React – 在表单提交后清除输入值
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – React – 在表单提交后清除输入值,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1293字,纯文字阅读大概需要2分钟。
内容图文
![javascript – React – 在表单提交后清除输入值](/upload/InfoBanner/zyjiaocheng/702/0b9a64c889ef47d8aaaacab0ae22cabf.jpg)
我遇到了一个相当愚蠢的问题.我正在创建我的第一个React应用程序,我遇到了一个小问题,在提交表单后我无法清除输入值.一个尝试谷歌搜索这个问题,在这里发现了一些类似的线程,但我无法解决这个问题.我不想更改组件/应用程序的状态,只是将输入值更改为空字符串.我尝试在onHandleSubmit()函数中清除输入的值,但是我收到了一个错误:
“Cannot set property ‘value’ of undefined”.
我的SearchBar组件:
import React, { Component } from "react";
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
city: ""
};
this.onHandleChange = this.onHandleChange.bind(this);
this.onHandleSubmit = this.onHandleSubmit.bind(this);
}
render() {
return (
<form>
<input
id="mainInput"
onChange={this.onHandleChange}
placeholder="Get current weather..."
value={this.state.city}
type="text"
/>
<button onClick={this.onHandleSubmit} type="submit">
Search!
</button>
</form>
);
}
onHandleChange(e) {
this.setState({
city: e.target.value
});
}
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.mainInput.value = "";
}
}
export default SearchBar;
解决方法:
您有一个受控组件,其中输入值由this.state.city确定.因此,一旦提交,您必须清除您的状态,这将自动清除您的输入.
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.setState({
city: ''
});
}
内容总结
以上是互联网集市为您收集整理的javascript – React – 在表单提交后清除输入值全部内容,希望文章能够帮你解决javascript – React – 在表单提交后清除输入值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。