一旦使用Axios创建表单提交,我将试图清除表单数据。消息通过良好,响应被记录到页面,但是每个文本字段中的数据在提交后保留在页面上。
我尝试添加一个resetForm
函数,将表单设置为原始的空白状态,但这是行不通的。
import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";
class Contact extends Component {
constructor(props){
super(props);
this.state = {fullName: "", email: "", message: ""};
}
resetForm = () => {
this.baseState = this.state
this.setState(this.baseState)
}
handleForm = e => {
axios.post(
"https://formcarry.com/s/axiosID",
this.state,
{headers: {"Accept": "application/json"}}
)
.then(function (response) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(response.data.title);
})
.catch(function (error) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(error);
});
e.preventDefault();
}
handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });
render() {
return (
<Grid>
<Cell col={6}>
<h2>Contact Me</h2>
<hr/>
<div style={{ width: '100%' }} className="contact-list">
<form onSubmit={this.handleForm}>
<Cell col={12}>
<Textfield type="text" id="fullName" name="fullName" className="full-name"
onChange={this.handleFields}
label="Full name"
floatingLabel
style={{width: '200px'}}
/>
</Cell>
<Cell col={12}>
{/* Textfield with floating label */}
<Textfield type="email" id="email" name="email" className="email-address"
onChange={this.handleFields}
label="Email address"
floatingLabel
style={{width: '200px'}}
/>
</Cell>
<Cell col={12}>
{/* Floating Multiline Textfield */}
<Textfield name="message" id="message" className="text-body"
onChange={this.handleFields}
label="Your message..."
rows={10}
style={{width: '400px'}}
/>
</Cell>
<Button raised accent ripple type="submit" onClick={this.resetForm}>Send</Button>
<div className="success-message">
<label></label>
</div>
</form>
</div>
</Cell>
</Grid>
)
}
}
export default Contact;
我真正想要的是,一旦我提交表单,文本字段fullName, email and message
就会清除,但是数据仍然保留在页面上。
发布于 2019-01-18 17:11:07
您不需要resetForm
函数(完全摆脱它),只需将状态设置在handleForm中,如下所示:
更新:您还需要将值支柱添加到每个输入中,以使其成为受控输入,请参见下面的内容:
import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";
class Contact extends Component {
constructor(props) {
super(props);
this.state = { fullName: "", email: "", message: "" };
}
handleForm = e => {
axios.post(
"https://formcarry.com/s/axiosID",
this.state,
{ headers: { "Accept": "application/json" } }
)
.then(function (response) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(response.data.title);
})
.catch(function (error) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(error);
});
e.preventDefault();
this.setState({fullName: '', email: '', message: ''}) // <= here
}
handleFields = e => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Grid>
<Cell col={6}>
<h2>Contact Me</h2>
<hr />
<div style={{ width: '100%' }} className="contact-list">
<form onSubmit={this.handleForm}>
<Cell col={12}>
<Textfield type="text" id="fullName" name="fullName" className="full-name"
onChange={this.handleFields}
value={this.state.fullName} // <= here
label="Full name"
floatingLabel
style={{ width: '200px' }}
/>
</Cell>
<Cell col={12}>
{/* Textfield with floating label */}
<Textfield type="email" id="email" name="email" className="email-address"
onChange={this.handleFields}
value={this.state.email} // <= here
label="Email address"
floatingLabel
style={{ width: '200px' }}
/>
</Cell>
<Cell col={12}>
{/* Floating Multiline Textfield */}
<Textfield name="message" id="message" className="text-body"
onChange={this.handleFields}
value={this.state.message} // <= here
label="Your message..."
rows={10}
style={{ width: '400px' }}
/>
</Cell>
<Button raised accent ripple type="submit">Send</Button>
<div className="success-message">
<label></label>
</div>
</form>
</div>
</Cell>
</Grid>
)
}
}
export default Contact;
作为一个副词:看看反应参考抓取元素..。在这里阅读更多信息:https://reactjs.org/docs/refs-and-the-dom.html
发布于 2019-01-18 16:36:39
你需要在提交后清除状态。调用setState之后,将使用我们设置的空值再次调用react呈现,希望这有帮助。
.then(function (response) {
let successMessage = document.querySelector('.success-message');
// here clear the state,
this.setState({
fullName: '',
email: '',
message: '',
});
successMessage.innerHTML = JSON.stringify(response.data.title);
})
发布于 2019-01-18 16:33:47
你可以做这样的事
resetForm = () => {
this.setState({fullName: "", email: "", message: ""});
}
将这些值重置为零。
https://stackoverflow.com/questions/54257943
复制相似问题