Я пытаюсь очистить данные формы после создания отправки формы с помощью 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 очищались после отправки формы, но данные оставались на странице.





Вы можете сделать что-то вроде
resetForm = () => {
this.setState({fullName: "", email: "", message: ""});
}
Это вернет эти значения к нулю.
@JackJack Вы нашли какое-нибудь решение?
Ваше состояние обновляется при изменении ввода формы.
handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });
Состояние не является статическим объектом.
Вам придется вручную обновить значения полей.
resetForm = () => {
this.setState({fullName: "", email: "", message: ""})
}
Вам нужно очистить состояние после отправки. После вызова setState рендеринг реакции будет вызван снова с пустыми значениями, которые мы установили, надеюсь, это поможет.
.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);
})
Вам не нужна функция 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;
В качестве примечания: просмотрите ссылки React для захвата элементов dom... подробнее здесь: https://reactjs.org/docs/refs-and-the-dom.html
Спасибо СакоБу. Та же проблема. Он не выдает никаких ошибок, но даже после того, как вы попробовали ваш метод, он все еще не очищается.
@Ang - о, это еще и потому, что это не контролируемый ввод... Я обновлю свой ответ...
Я попробовал ваш обновленный код, но всякий раз, когда я печатаю в любом из текстовых полей, он читает e.target.value, и я не могу изменить значения.
@Ang... В вашем handleFields избавьтесь от кавычек из 'e.target.value' вместо фактического значения вы получаете строку
Из показанного кода не видно, были ли значения полей формы присвоены значениями из состояния. (например, для fullName field: value = this.state.fullName). Если бы значение не было присвоено, форма не была бы перерисована, даже если бы setState был правильно определен.
Спасибо, парни. Я пробовал все эти методы, но ни один из них не работает.