React项目中的一些问题

 

1.修改state中的对象和数组

//添加或修改对象
this.setState({
  object: {...this.state.object, key: value}
});

//删除数组某一项
let temp=this.state.array;
temp.splice(index, 1);
this.setState({
  array:temp
});

//数组首部添加和尾部添加
this.setState({
  array: [item, ...this.state.array]
});
this.setState({
  array: [...this.state.array, item]
});

//数组某一位置添加
let temp=this.state.array;
temp.splice(index, 0,item);
this.setState({
  array:temp
});

2.[Antd] Warning: You cannot set a form field before rendering a field associated with the value.

对form表单进行初始化的时候，应该使用initialValue，动态改变表单中的值应该使用setFieldsValue。

{/*在使用Select时，如果value和label不一致要动态设置label时，使用value+""*/}
<Form.Item label="资源类型">
    {getFieldDecorator('type', {
        initialValue:this.props.rowInfo.type?this.props.rowInfo.type+"":1+""
    })(
        <Select placeholder="请选择">
            <Option value="1">目录</Option>
            <Option value="2">模块</Option>
            <Option value="3">页面</Option>
            <Option value="4">Action</Option>
        </Select>
    )}
</Form.Item>

3.设置DatePicker的初始值，需注意对象和字符串的转换

import moment from 'moment';

<Form.Item label="创建时间">
    {getFieldDecorator('addTime',{
        initialValue:this.props.rowInfo.addTime?moment(this.props.rowInfo.addTime, 'YYYY/MM/DD'):null
    })(<DatePicker />)}
</Form.Item>

 
this.props.form.validateFieldsAndScroll((err, values) => {
    if (!err) {
        if(values.addTime)
            values.addTime=moment(values.addTime).format('Y-MM-DD HH:mm:ss');
        else
            values.addTime=""
        ...
    }
});

4.给TreeNode添加删除、编辑等操作按钮，可在title属性中使用jsx。

<TreeNode key={v.id} title={
    <span>
        {v.name}
        <Icon type="delete" title="删除当前项" onClick={_this.removeProject.bind(_this,v)}/>
        <Icon type="form" title="编辑当前项" onClick={v.type==1?_this.editProject.bind(_this,v):_this.editEntity.bind(_this,v,2)}/>
    </span>
}>