【React】Antd

Table

子表

先确定框架 Table 是否支持 expandable，如不兼容则使用 expandedRowRender 渲染，参考：

https://blog.csdn.net/z3y3m3/article/details/86602192

icon

https://3x.ant.design/components/icon-cn/#header

Input渲染和修改

<Input value={this.state.comment} onChange={(e)=>{this.commentUpdate(e.target.value)}} placeholder='说明'/>

commentUpdate(value) {
  this.setState(
    {comment: value},
    ()=>{console.log("callback")},
  )
}

日期范围

const dateFormat = 'YYYY-MM-DD'

this.state = {
  dateRanger: [moment().add("days", -7), moment()],
}

datePicker(dates) {
  this.setState({dateRanger: dates, ()=>{console.log("callback")}}),
}

<RangePicker onChange={(dates)=>this.datePicker(dates)} defaultValue={this.state.dateRanger} format={dateFormat} />

onChange callback

loadDataFunction = (value) => {
  this.setState({switchData: value, InputNumber: value});
}

loadDataFunctionInput(value) {
  this.setState({inputData: value});
}

<InputNumber onChange={this.loadDataFunction}/>
<Switch onChange={this.loadDataFunction}/>
<Input onChange={(e)=>{this.loadDataFunctionInput(e.target.value)}}/>