如何将分钟或小时或天转换为秒并将其发送到 React 中的 API？
[英]How can I convert minutes or hours or days to seconds and send it to API in React?
问题描述
我正在创建一个应用程序，用户可以在其中选择频率单位（秒、分钟、小时或天）并在输入中写入频率值。 我必须在几秒钟内将值发送到服务器，所以我必须转换它。 当我以秒为单位发送频率值时，一切都很好，但我无法将该值转换为分钟、小时或天。 例如，当我尝试发送 10 分钟时，服务器得到的频率值为“10”，而不是“600”（10 分钟 * 60 秒）。 你能告诉我我的代码有什么问题吗？
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addSensor } from '../actions/sensors';
class AddSensorPage extends Component {
state = {
name: '',
category: '',
frequencyUnit: '',
frequency: '',
minValue: '',
maxValue: ''
}
static propTypes = {
addSensor: PropTypes.func.isRequired
}
handleChange = e => {
this.setState({
[e.target.name]: e.target.value,
})
}
handleCategorySelect = e => {
this.setState({ category: e.target.value })
}
handleFrequencyUnitSelect = e => {
this.setState({ frequencyUnit: e.target.value })
}
handleSubmit = e => {
e.preventDefault();
const { name, category, frequency, frequencyUnit } = this.state;
// Validation
if (frequencyUnit === 'seconds') {
this.setState({
minValue: '30',
maxValue: '21474836',
})
}
if (frequencyUnit === 'minutes') {
this.setState({
minValue: '1',
maxValue: '357913',
frequency: this.state.frequency * 60
})
}
if (this.state.frequencyUnit === 'hours') {
this.setState({
minValue: '1',
maxValue: '5965',
frequency: frequency * 3600
})
}
if (this.state.frequencyUnit === 'days') {
this.setState({
minValue: '1',
maxValue: '248',
frequency: frequency * 86400
})
}
const sensor = { name, category, frequency };
this.props.addSensor(sensor);
this.setState({
name: '',
category: '',
frequencyUnit: '',
frequency: ''
})
}
render() {
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<h2 className="text-center">Add sensor</h2>
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Name</label>
<input
type="text"
className="form-control"
name="name"
onChange={this.handleChange}
value={this.state.name}
/>
</div>
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature sensor</option>
<option value="humidity">Humidity sensor</option>
</select>
</div>
<div className="form-group">
<label>Frequency</label>
<select className="form-control" onChange={this.handleFrequencyUnitSelect} value={this.state.frequencyUnit}>
<option></option>
<option value="seconds">Seconds</option>
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
</select>
</div>
<div className="form-group">
<input
type="number"
className="form-control"
name="frequency"
onChange={this.handleChange}
value={this.state.frequency}
placeholder="Value..."
min={this.state.minValue}
max={this.state.maxValue}
/>
</div>
<div className="form-group">
<button className="btn btn-primary">Dodaj</button>
</div>
</form>
</div>
</div>
);
}
}
export default connect(null, { addSensor })(AddSensorPage);
2 个解决方案
解决方案1
0 2020-06-10 18:33:27
您依赖于相同的 state 并试图在您的代码中获得价值。 你为什么不简单地推导出它？
if (frequencyUnit === "minutes") {
this.setState({
minValue: "1",
maxValue: "357913",
frequency
});
}
和
const sensor = {
name,
category,
frequency: frequency * multiplier[frequencyUnit]
};
multiplier是：
const multiplier = {
seconds: 1,
minutes: 60,
hours: 3600,
days: 86400
};
仍然，不是最好的方法。 像这样在提交部分设置 state 并不明智。 同样，这是一种幼稚的方法。 您应该考虑更明智地设置应用程序 state。
这是一个更好的方法：
const units = { seconds: { name: "seconds", multiplier: 1, minValue: "30", maxValue: "21474836" }, minutes: { name: "minutes", multiplier: 60, minValue: "1", maxValue: "357913" }, hours: { name: "hours", multiplier: 3600, minValue: "1", maxValue: "5965" }, days: { name: "days", multiplier: 86400, minValue: "1", maxValue: "248" } }; class App extends React.Component { state = { name: "", category: "", frequencyUnit: {}, frequency: "", minValue: "", maxValue: "" }; handleChange = e => { this.setState({ [e.target.name]: e.target.value }); }; handleCategorySelect = e => { this.setState({ category: e.target.value }); }; handleFrequencyUnitSelect = e => { this.setState({ frequencyUnit: units[e.target.value] }); }; handleSubmit = e => { e.preventDefault(); const { name, category, frequency, frequencyUnit } = this.state; const sensor = { name, category, frequency: frequency * frequencyUnit.multiplier }; console.log(sensor); //this.props.addSensor(sensor); this.setState({ name: "", category: "", frequencyUnit: {}, frequency: "" }); }; render() { return ( <div className="col-md-6 m-auto"> <div className="card card-body mt-5"> <h2 className="text-center">Add sensor</h2> <form onSubmit={this.handleSubmit}> <div className="form-group"> <label>Name</label> <input type="text" className="form-control" name="name" onChange={this.handleChange} value={this.state.name} /> </div> <div className="form-group"> <label>Category</label> <select className="form-control" onChange={this.handleCategorySelect} value={this.state.category} > <option /> <option value="temperature">Temperature sensor</option> <option value="humidity">Humidity sensor</option> </select> </div> <div className="form-group"> <label>Frequency</label> <select className="form-control" onChange={this.handleFrequencyUnitSelect} value={this.state.frequencyUnit.name || ""} > <option /> <option value="seconds">Seconds</option> <option value="minutes">Minutes</option> <option value="hours">Hours</option> <option value="days">Days</option> </select> </div> <div className="form-group"> <input type="number" className="form-control" name="frequency" onChange={this.handleChange} value={this.state.frequency} placeholder="Value..." min={this.state.frequencyUnit.minValue} max={this.state.frequencyUnit.maxValue} /> </div> <div className="form-group"> <button className="btn btn-primary">Dodaj</button> </div> </form> </div> </div> ); } } ReactDOM.render( <App />, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />
解决方案2
0 已采纳 2020-06-10 18:47:57
问题是因为 setState 异步工作
import React, { Component } from "react";
import { connect } from 'react-redux';
import PropTypes from "prop-types";
import { addSensor } from '../actions/sensors';
class AddSensorPage extends Component {
state = {
name: "",
category: "",
frequencyUnit: "",
frequency: "",
minValue: "",
maxValue: ""
};
static propTypes = {
addSensor: PropTypes.func.isRequired
};
handleChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
handleCategorySelect = e => {
this.setState({ category: e.target.value });
};
handleFrequencyUnitSelect = e => {
this.setState({ frequencyUnit: e.target.value });
};
callBack = () => {
let sensor = {};
sensor = {
name: this.state.name,
category: this.state.category,
frequency: this.state.frequency
};
console.log(sensor);
this.props.addSensor(sensor);
this.setState({
name: "",
category: "",
frequencyUnit: "",
frequency: ""
});
};
handleSubmit = e => {
e.preventDefault();
const { name, category, frequency, frequencyUnit } = this.state;
// Validation
if (frequencyUnit === "seconds") {
this.setState(
{
minValue: "30",
maxValue: "21474836"
},
() => {
this.callBack();
}
);
}
if (frequencyUnit === "minutes") {
this.setState(
{
minValue: "1",
maxValue: "357913",
frequency: frequency * 60
},
() => {
this.callBack();
}
);
}
if (this.state.frequencyUnit === "hours") {
this.setState(
{
minValue: "1",
maxValue: "5965",
frequency: frequency * 3600
},
() => {
this.callBack();
}
);
}
if (this.state.frequencyUnit === "days") {
this.setState(
{
minValue: "1",
maxValue: "248",
frequency: frequency * 86400
},
() => {
this.callBack();
}
);
}
// console.log("This is the sensor", sensor);
};
render() {
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<h2 className="text-center">Add sensor</h2>
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Name</label>
<input
type="text"
className="form-control"
name="name"
onChange={this.handleChange}
value={this.state.name}
/>
</div>
<div className="form-group">
<label>Category</label>
<select
className="form-control"
onChange={this.handleCategorySelect}
value={this.state.category}
>
<option />
<option value="temperature">Temperature sensor</option>
<option value="humidity">Humidity sensor</option>
</select>
</div>
<div className="form-group">
<label>Frequency</label>
<select
className="form-control"
onChange={this.handleFrequencyUnitSelect}
value={this.state.frequencyUnit}
>
<option />
<option value="seconds">Seconds</option>
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
</select>
</div>
<div className="form-group">
<input
type="number"
className="form-control"
name="frequency"
onChange={this.handleChange}
value={this.state.frequency}
placeholder="Value..."
min={this.state.minValue}
max={this.state.maxValue}
/>
</div>
<div className="form-group">
<button className="btn btn-primary">Dodaj</button>
</div>
</form>
</div>
</div>
);
}
}
//export default AddSensorPage;
export default connect(null, { addSensor })(AddSensorPage);
这也是一个有效的代码框示例： 示例
如何将秒分别转换为年、月、日、小时、分钟？
[英]How to Convert Seconds into Year, Month, Days, Hours, Minutes respectively?
使用momentjs将天转换为获取两个日期的时分秒
[英]Convert days to get hours, minutes and seconds of two dates using momentjs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.