将下一个值相对于第一个值增加一定数量 [英] Increase the next value by a certain number in relation to the first value
本文介绍了将下一个值相对于第一个值增加一定数量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个应用程序，用户可以在其中为每个生成的字段设置时间.
const [firstTime, setFirstTime] = useState({});const [secondTime, setSecondTime] = useState({});const onFinish = 值 =>{控制台.日志(values.users.map(i => {返回 {...一世，time0: moment(i.time0).format("HH mm"),time1: moment(i.time1).format("HH mm")};}));};函数 onChange1(时间，时间字符串，键){控制台日志(时间，时间字符串)；setFirstTime({ ...firstTime, [key]: timeString });}函数 onChange2(时间，时间字符串，键){控制台日志(时间，时间字符串)；setSecondTime({ ...secondTime, [key]: timeString });}console.log(secondTime, firstTime);返回 (<表单名称=dynamic_form_nest_item";onFinish={onFinish} autoComplete="off"><Form.List name="users">{(字段，{添加，删除})=>{返回 (<div>{fields.map((field, index) => (<空格键={field.key}style={{ display: flex", marginBottom: 8 }}对齐=开始"><Form.Item{...场地}name={[field.name, 第一个"]}fieldKey={[field.fieldKey, 第一个"]}key={`item7${index}`}rules={[{ required: true, message: "Missing first name";}]}><输入占位符=名字"/></Form.Item><Form.Item{...场地}key={`item8${index}`}name={[field.name, time0"]}初始值={时刻(firstTime[Object.keys(firstTime)[index - 1]]||'07:00',HH mm").add(index * 5, 分钟")}fieldKey={[field.fieldKey, time0"]}><时间选择器onChange={(date, dateString) =>onChange1(date, dateString, field.key)}/></Form.Item><Form.Item{...场地}key={`item9${index}`}name={[field.name, time1"]}初始值={时刻(secondTime[Object.keys(secondTime)[index - 1]] ||'10:00',HH mm").add(index * 5, 分钟")}fieldKey={[field.fieldKey, time1"]}><时间选择器onChange={(date, dateString) =>onChange2(date, dateString, field.key)}/></Form.Item><减号圆轮廓onClick={() =>{删除(字段名称)；}}/></空间>))}<表单.项目><按钮类型=虚线"onClick={() =>{添加();}}堵塞><PlusOutlined/>添加字段</按钮></Form.Item>);}}</Form.List>
应用的想法是下一个:
- 用户点击
add field按钮，其中出现一些用户可以添加值的输入 - 日期选择器的默认值为
07:00 和 10:00(但用户可以更改初始值) - 用户生成的每个日期选择器的下一个值必须比用户的每个选定值高 5 分钟(来自带有时间选择器的前一行)
例1:
07:00 10:00
07:05 10:05
例2:
用户可以通过以下方式更改第一个值:
07:25 10:05
07:30 10:10
用户可以选择下一个值，例如:07:40 10:15
07:45 10:20
...等等..
现在这个想法只有在我点击添加字段"按钮而不更改日期选择器的值时才有效，下一个值将像我描述的那样，但是当我尝试从选择器更改值时出现问题，因为下一个选择器不要考虑该值应该在 5 分钟时更高.
**问题**:如何解决问题并使上述想法可行?
演示:
https://codesandbox.io/s/hungry-star-nu5ld?file=/index.js:365-3725
解决方案
首先，我们在这里没有看到任何跟踪未更改值的代码.此外，您正在快速添加 5 分钟，但没有记录下来.
为了解决这个问题，让我们在您调用 add 之前完成所有这些操作:
<按钮类型=虚线"onClick={() =>{const length = Object.keys(firstTime).length;如果(长度> 0){const newTime = 时刻(第二时间[长度 - 1]，HH mm")const newSecTime = 时刻(第二时间[长度 - 1]，HH mm").add(5, 分钟");setFirstTime({ ...firstTime, [length]: newTime });setSecondTime({ ...secondTime, [length]: newSecTime });} 别的 {setFirstTime({ ...firstTime, [长度]: "07:00" });setSecondTime({ ...secondTime, [length]: "10:00" });}添加();}}堵塞><PlusOutlined/>添加字段</按钮>接下来让我们使用 timepicker 的 defaultValue 属性来显示值:
onChange1(date, dateString, field.key)}/> I have an application where user can set the time for each generated fields.
const [firstTime, setFirstTime] = useState({});
const [secondTime, setSecondTime] = useState({});
const onFinish = values => {
console.log(
values.users.map(i => {
return {
...i,
time0: moment(i.time0).format("HH mm"),
time1: moment(i.time1).format("HH mm")
};
})
);
};
function onChange1(time, timeString, key) {
console.log(time, timeString);
setFirstTime({ ...firstTime, [key]: timeString });
}
function onChange2(time, timeString, key) {
console.log(time, timeString);
setSecondTime({ ...secondTime, [key]: timeString });
}
console.log(secondTime, firstTime);
return (
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
key={`item7${index}`}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
key={`item8${index}`}
name={[field.name, "time0"]}
initialValue={moment(
firstTime[Object.keys(firstTime)[index - 1]]|| '07:00',
"HH mm"
).add(index * 5, "minutes")}
fieldKey={[field.fieldKey, "time0"]}
>
<TimePicker
onChange={(date, dateString) =>
onChange1(date, dateString, field.key)
}
/>
</Form.Item>
<Form.Item
{...field}
key={`item9${index}`}
name={[field.name, "time1"]}
initialValue={moment(
secondTime[Object.keys(secondTime)[index - 1]] || '10:00',
"HH mm"
).add(index * 5, "minutes")}
fieldKey={[field.fieldKey, "time1"]}
>
<TimePicker
onChange={(date, dateString) =>
onChange2(date, dateString, field.key)
}
/>
</Form.Item>
<MinusCircleOutlined
onClick={() => {
remove(field.name);
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
The idea of the application is next:
- User clicks on
add fieldbutton where appears some inputs where user can add value - Th default values of date pickers is
07:00 and 10:00(but user can change the initial values) - The next value of each date picker that will be generated by the user has to be higher with 5 minutes than each selected value of the user (from previous row with time pickers)
Ex1:
07:00 10:00
07:05 10:05
Ex2:
User can change the first value in the next way:
07:25 10:05
07:30 10:10
User can select the next values like: 07:40 10:15
07:45 10:20
...and so on..
Now the idea works only if i click on `add field` button without changing a value from date picker, and the next values will be like i described, but appears issue when i try to change a value from a picker, because the next pickers don't take into account that the value should be higher with 5 minutes.
**Question**: How to solve the issue and to make workable the idea described above?
demo:
https://codesandbox.io/s/hungry-star-nu5ld?file=/index.js:365-3725
解决方案
First of all,we don't see any code here which keeps a track of your un-changed value. Also, you are adding the 5 minutes on the fly but not keeping a record of it.
To solve this, let us do all this just before you call add:
<Button
type="dashed"
onClick={() => {
const length = Object.keys(firstTime).length;
if (length > 0) {
const newTime = moment(
secondTime[length - 1],
"HH mm"
)
const newSecTime = moment(
secondTime[length - 1],
"HH mm"
).add(5, "minutes");
setFirstTime({ ...firstTime, [length]: newTime });
setSecondTime({ ...secondTime, [length]: newSecTime });
} else {
setFirstTime({ ...firstTime, [length]: "07:00" });
setSecondTime({ ...secondTime, [length]: "10:00" });
}
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
Next lets make use of defaultValue prop of timepicker to display the value:
<TimePicker
defaultValue={moment(firstTime[index], "HH mm")}
onChange={(date, dateString) =>
onChange1(date, dateString, field.key)
}
/>
这篇关于将下一个值相对于第一个值增加一定数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
