react动态添加输入表单 input checkbox等

开发时有时需要动态添加输入框，如下图：

 

 

点击添加周期，白框会被复制，开始看到这个功能是懵的，后来想明白了，本质就是渲染了一个数组，添加周期按键是向数组追加一个空对象，也可以带有部分默认属性值。

每个白框中修改数据的表单元素的onChange事件 ，都必须传递index，这样就会根据index找到数组中的数据，进而修改，然后调用set函数

 

 

    function cloneCheckBox(e,index) {
        let data = e.map(ele=>parseInt(ele));
        weekStep[index].weekdays = data;
        setWeekStep([...weekStep]);
    }

    function handleTime(e,str,index,type) {
        weekStep[index][type] = str;
        setWeekStep([...weekStep]);
    }

 

渲染代码：

<div className="classcontent">
                                        {weekStep.map((ele,index)=>{
                                            return <div className="repeatContent" key={index}>
                                                <Form.Item
                                                    labelCol={{ span: 4 }}
                                                    wrapperCol={{ span: 18 }}
                                                    name="周几上课"
                                                    label="周几上课"
                                                    valuePropName="checked">
                                                    <Checkbox.Group
                                                        // onChange={e=>console.log(e)}
                                                        onChange={(e) => { cloneCheckBox(e, index) }}
                                                        options={checkOptions} />

                                                </Form.Item>


                                                <Form.Item
                                                    labelCol={{ span: 4 }}
                                                    wrapperCol={{ span: 18 }}
                                                    label="上课时间"
                                                    name="effectiveDataEnd"
                                                    rules={[{ required: true, message: '请输入终止日期!' }]}
                                                >

                                                    <TimePicker
                                                        onChange={(e, str) => { handleTime(e, str, index, 'startTime')}}
                                                        defaultValue={moment(ele.startTime, 'HH:mm')}
                                                        format={"HH:mm"}
                                                    />
                                                ~
                                            <TimePicker
                                                        onChange={(e, str) => { handleTime(e, str, index, 'endTime') }}
                                                        defaultValue={moment(ele.endTime, 'HH:mm')}
                                                        format={"HH:mm"}
                                                    />
                                                </Form.Item>
                                            </div>
                                        })}
                                        <Form.Item
                                            labelCol={{ span: 4 }}
                                            wrapperCol={{offset:4, span: 18 }}
                                        >
                                            <Button onClick={addWeekStep}>添加周期</Button>
                                            <Button onClick={testButton}>测试</Button>
                                        </Form.Item>
                                    </div>

参考文章：https://segmentfault.com/q/1010000017986817