标签：https button 图片 info ndt code span name 点击
开发时有时需要动态添加输入框，如下图：
点击添加周期，白框会被复制，开始看到这个功能是懵的，后来想明白了，本质就是渲染了一个数组，添加周期按键是向数组追加一个空对象，也可以带有部分默认属性值。
每个白框中修改数据的表单元素的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
标签：https button 图片 info ndt code span name 点击
原文地址：https://www.cnblogs.com/suoking/p/14767866.html
