Forms 在React.js中输入后无法清除表单/状态
我有一个表单,它最终将被用作UI,用于对进行一些API调用 现在,当我在输入字段中提交a邮政编码时,提交时[object object]会传播字段,如下面的屏幕截图所示 对API的调用正在工作,因为我正在获取正确邮政编码的JSON 但是handleSubmit中的这个不应该处理所有的事情吗?例如,使用Object.assign创建新状态,然后使用form.zipcode.value=;清除输入 提前谢谢Forms 在React.js中输入后无法清除表单/状态,forms,reactjs,state,Forms,Reactjs,State,我有一个表单,它最终将被用作UI,用于对进行一些API调用 现在,当我在输入字段中提交a邮政编码时,提交时[object object]会传播字段,如下面的屏幕截图所示 对API的调用正在工作,因为我正在获取正确邮政编码的JSON 但是handleSubmit中的这个不应该处理所有的事情吗?例如,使用Object.assign创建新状态,然后使用form.zipcode.value=;清除输入 提前谢谢 handleSubmit(event) { event.preventDefault
handleSubmit(event) {
event.preventDefault();
var form = document.forms.weatherApp;
api.getWeatherByZip(this.state.zipcode).then(
function(zip) {
console.log('zip', zip);
this.setState(function() {
return {
zipcode: Object.assign({}, zip),
};
});
}.bind(this)
);
form.zipcode.value = '';
}
我在这里附上了所有组件的代码
import React, { Component } from 'react';
import * as api from '../utils/api';
import '../scss/app.scss';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
zipcode: [],
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
zipcode: event.target.value,
});
}
handleSubmit(event) {
event.preventDefault();
var form = document.forms.weatherApp;
api.getWeatherByZip(this.state.zipcode).then(
function(zip) {
console.log('zip', zip);
this.setState(function() {
return {
zipcode: Object.assign({}, zip),
};
});
}.bind(this)
);
form.zipcode.value = '';
}
render() {
return (
<div className="container">
<form name="weatherApp" onSubmit={this.handleSubmit}>
<h2>Open Weather App</h2>
<div className="row">
<div className="one-half column">
<label htmlFor="insertMode">Insert your location</label>
<input
name="zipcode"
className="u-full-width"
placeholder="please enter your zipcode"
type="text"
autoComplete="off"
value={this.state.zipcode}
onChange={this.handleChange}
/>
</div>
<div className="one-half column">
<label htmlFor="showMin">show minimum</label>
<input type="checkbox" />
<label htmlFor="showMax">show maximum</label>
<input type="checkbox" />
<label htmlFor="showMean">show mean</label>
<input type="checkbox" />
</div>
</div>
<div className="row">
<div className="two-half column">
<input type="submit" value="Submit" />
</div>
</div>
</form>
</div>
);
}
}
您应该让react管理对DOM的更改,而不是手动编辑它。由于输入字段的值已经绑定到this.state.zipcode以重置它,只需调用this.setState{zipcode:}而不是form.zipcode.value=