Я использовал код ниже. Он длинный, но все же это одно выражение и производит очень дружественный вывод, поскольку он не выводит дни, часы, минуты или секунды, если они имеют значение нуля.
В образце он производит вывод : «4 дня 1 час 3 секунды».
TimeSpan sp = new TimeSpan(4,1,0,3);
string.Format("{0}{1}{2}{3}",
sp.Days > 0 ? ( sp.Days > 1 ? sp.ToString(@"d\ \d\a\y\s\ "): sp.ToString(@"d\ \d\a\y\ ")):string.Empty,
sp.Hours > 0 ? (sp.Hours > 1 ? sp.ToString(@"h\ \h\o\u\r\s\ ") : sp.ToString(@"h\ \h\o\u\r\ ")):string.Empty,
sp.Minutes > 0 ? (sp.Minutes > 1 ? sp.ToString(@"m\ \m\i\n\u\t\e\s\ ") :sp.ToString(@"m\ \m\i\n\u\t\e\ ")):string.Empty,
sp.Seconds > 0 ? (sp.Seconds > 1 ? sp.ToString(@"s\ \s\e\c\o\n\d\s"): sp.ToString(@"s\ \s\e\c\o\n\d\s")):string.Empty);
Вам не нужна функция resetForm
(избавьтесь от нее вообще), просто установите свое состояние в handleForm следующим образом:
ОБНОВЛЕНИЕ: Вам также нужно добавить значение prop для каждого входа в сделайте его контролируемым вводом, см. ниже:
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/ рефов-и-dom.html-
Вы могли бы сделать что-то вроде
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);
})
Ваше состояние обновляется при изменении формы ввода.
handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });
Состояние не является статическим объектом.
Вам придется вручную обновить значения полей.
resetForm = () => {
this.setState({fullName: "", email: "", message: ""})
}