我有一个应用程序,用户可以在其中设置每个生成字段的时间。
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>
接下来是该应用程序的想法:
add field
07:00 and 10:00
示例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分钟的时间,但没有保留它的记录。
为了解决这个问题,让我们在致电添加之前做所有这些事情:
<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>
接下来,使用时间选择器的defaultValue属性显示值:
<TimePicker defaultValue={moment(firstTime[index], "HH mm")} onChange={(date, dateString) => onChange1(date, dateString, field.key) } />