在使用React.FC创建的组件tabs的TabPane中，如何实现通过点击Button添加一行数据

Question

如题：

 <Tabs defaultActiveKey="1" tabPosition={'top'} style={{height:220}}>
                    {[...Array.from(tabHeader,i=>i)].map((i,index)=>(
                        <TabPane tab={i}  key={index}>
                            <div style={{textAlign:'left',width:350}}>
                                    <div>
                                        <RangePicker bordered={true} placeholder={['开始时间','结束时间']} onChange={onChange} /> 
                                    </div>
                                    <div style={{textAlign:'center'}}>
                                         <Button style={{width: '50',marginTop:8,marginBottom: 8,marginRight:110}} onClick={event =>{addTime(index)}}> <PlusOutlined/></Button>
                                    </div>
                            </div>

                        </TabPane>
                    ))}

                </Tabs>

如上代码中，如何通过点击BUTTON控件为TabPane的DIV中动态的增加一个 时间控件RangePicker

Answer 1

一般这种都是: 数据->视图的模式, 当你想增加某一项的时候, 增加其中的数据, 然后更新state, 就会触发重新渲染. 比如:

{
  "date":[
     {...},
     {...}
  ]
}

详细

界面是根据你的视图来决定的, 你想要选择时间, 其中有的需要多个选择时间, 那你这个选择时间的操作本身就是为了产生数据或者辅助产生数据. 当你需要动态或者根据条件来渲染的时候, 就需要通过 数据->组件 的方式, 不要纠结于 我只是像简单添加一个这么简单.

比如你的要求是: 需要两个时间选择, 那么就传递两个下去:

{
  "date":[
     {start:0, end:0}, // 用户设置默认值, 
     {start:0, end:0}
  ]
}

然后组件在渲染的时候是:

// 这样就构建出来了两个
item.date.forEach((innerItem, index)=>{
   <DateSelect {...props} key={index} value=innerItem />
})

那怎么通过按钮变更, date数组的值呢? 就是将props传递过来的值进行修改, 但是props不能直接修改, 你可以封装一层.

// 父组件state封装
const [value, setValue] = userstate({
  "date":[
     {start:0, end:0}, // 用户设置默认值, 
     {start:0, end:0}
  ]
})

const renderState = {value, setValue}

return (
  <Cmp renderState={renderState} />
)

可以直接递归传下去, 也可以使用context传下去. 然后在button里面使用这个, 当点击的时候, 你就读取renderState.value然后修改其值, 然后调用renderState.setValue(newValue) 这个时候父组件的值变了, 就会触发重新渲染.

根据数据渲染出来的页面, 那么想要更改页面, 也是通过修改数据触发重新渲染得到的.

我是搞后端的, 写过一些react, 不一定符合前端的思想.

Answer 2

本来不需要再写些什么了，上面的哥们已经讲的很全面了。
但是既然问了，有始有终，就将我的做法发布出来吧。主要是我对前端TS，React这块的页面状态理解不够.

这里的addTime(index)
const [value,setValue]=useState<number[]>([]);
const addTime=(e:number)=>{
  Item.push([{key:xxx,value:xxx}]);
   setValue(e);//最主要是这个，改变页面的状态，触发页面重新渲染。
}