class AddProduct extends Component {
constructor(props){
super(props);
// 设置 initial state
this.state = {
radio : true,
loading : false,
selectImg : false,
selectImg2 : false,
data : [
{
title : 'Title 1',
},
{
title : 'Title 2',
},
{
title : 'Title 3',
},
{
title : 'Title 4',
},
{
title : 'Title 5',
},
{
title : 'Title 6',
}, {
title : 'Title 1',
},
{
title : 'Title 2',
},
{
title : 'Title 3',
},
{
title : 'Title 4',
},
{
title : 'Title 5',
},
{
title : 'Title 6',
},
],
formData : {},
// imgArr : []
}
}
//表单提交事件
handleSubmit = (e) =>{
e.preventDefault();
console.log(this.props.form);
this.props.form.validateFields((err, values) =>{
if(!err){
console.log('Received values of form: ', values);
console.log(this);//这里是验证通过后的逻辑 如何发送到后端API接口
}
});
};
/* handleChange = (info) =>{
console.log(info);
if(info.file.status === 'uploading'){
this.setState({loading : true});
return;
}
if(info.file.status === 'done'){
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => this.setState({
imageUrl,
loading : false,
}));
console.log(this.state.imageUrl);
}
};*/
normFile = (e) =>{
console.log('Upload event:', e);
if(Array.isArray(e)){
return e;
}
return e && e.fileList;
};
selected = () =>{
this.setState({
radio : true,
});
this.refs.photo.selected()
};
selected2 = () =>{
this.setState({
radio : false,
});
this.refs.photo.selected()
};
chooiseImg = (options) =>{
if(this.state.radio){
this.props.form.setFieldsValue({
imageUrl : options
});
} else {
this.props.form.setFieldsValue({
detailImage : options
});
}
};
deleteImg = (url) =>{
let arr = this.props.form.getFieldsValue(["detailImage"]).detailImage;
console.log(arr);
arr.splice(arr.indexOf(url), 1);
this.props.form.setFieldsValue({
detailImage : arr
});
console.log(arr);
// this.refs.photo.deleteImg(url)
};
toLeft=(url)=>{
let arr = this.props.form.getFieldsValue(["detailImage"]).detailImage;
let index=arr.indexOf(url)
if(index>0){
let str=arr[index-1];
arr[index-1]=url;
arr[index]=str;
}
this.props.form.setFieldsValue({
detailImage : arr
});
};
toRight=(url)=>{
let arr = this.props.form.getFieldsValue(["detailImage"]).detailImage;
let index=arr.indexOf(url);
if(index<arr.length-1){
let str=arr[index+1];
arr[index+1]=url;
arr[index]=str;
}
this.props.form.setFieldsValue({
detailImage : arr
});
};
render(){
const {getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol : {span : 6},
wrapperCol : {span : 14},
};
/*const uploadButton = (
<div>
<Icon type={this.state.loading ? 'loading' : 'plus'}/>
<div className="ant-upload-text">Upload</div>
</div>
);*/
const onChange = () =>{
};
// const imageUrl = this.state.imageUrl;
return (
<Layout style={{padding : '0 24px 24px'}}>
<Breadcrumb style={{margin : '16px 0'}}>
<Breadcrumb.Item>商品管理</Breadcrumb.Item>
<Breadcrumb.Item>添加商品</Breadcrumb.Item>
</Breadcrumb>
<Content style={{background : '#fff', padding : 24, margin : 0, minHeight : 280}}>
<Form onSubmit={this.handleSubmit}> <FormItem{...formItemLayout} label="商品名称">
{getFieldDecorator('name', {
rules : [
{required : true, message : '请输入商品名称!'},
],
})(
<Input placeholder="请输入商品名称"/>
)}
</FormItem> <FormItem{...formItemLayout} label="商品描述">
{getFieldDecorator('商品描述', {
rules : [
{required : true, message : '请对该商品进行简短的描述!'},
],
})(
<TextArea placeholder="请对该商品进行简短的描述" className="custom" style={{height : 50}} onKeyPress={this.handleKeyPress}/>
)}
</FormItem>
<FormItem{...formItemLayout} label="商品类型" >
{getFieldDecorator('type', {
rules : [
{required : true, message : '请选择该商品的类型!'},
],
})(
<RadioGroup>
{
this.props.sorts.map(e => (
<RadioButton value={e.id} key={e.id}>{e.name}</RadioButton>
))
}
</RadioGroup>
)}
</FormItem>
<FormItem{...formItemLayout} label="尺寸类型">
{getFieldDecorator('size', {
rules : [
{required : true, message : '请选择商品尺寸类型'},
]
})(
<RadioGroup>
<RadioButton value="clothes">上衣</RadioButton>
<RadioButton value="b">裤装</RadioButton>
</RadioGroup>
)}
</FormItem>
<FormItem{...formItemLayout} label="价格">
{getFieldDecorator('price', {
rules : [
{required : true, message : '请输入商品价格'},
]
})(
<InputNumber formatter={value => `￥${value}`} parser={value => value.replace('￥', '')} placeholder="请输入商品价格"/>
)}
</FormItem>
<FormItem{...formItemLayout} label="商品标签">
{getFieldDecorator('tag', {
rules : [
{required : true, message : '请选择商品尺寸类型'},
]
})(
<RadioGroup>
<Radio value="clothes">新品</Radio>
<Radio value="b">热卖</Radio>
<Radio value="c">无</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem{...formItemLayout} label="商品封面图片">
{getFieldDecorator('imageUrl', {
rules : [
{required : true, message : '至少上传一张商品展示图片'},
],
})(
this.props.form.getFieldsValue(["imageUrl"]).imageUrl ?
<img src={this.props.form.getFieldsValue(["imageUrl"]).imageUrl} onClick={this.selected} className={style.img} alt=""/> :
<Button icon="plus" className={style.plus} onClick={this.selected}/>
)}
</FormItem>
<FormItem{...formItemLayout} label="商品轮播图片">
{getFieldDecorator('detailImage', {
rules : [
{required : true, message : '至少上传一张商品展示图片'},
],
})(
<div>
{(() =>{
if(this.props.form.getFieldsValue(["detailImage"]).detailImage){
return this.props.form.getFieldsValue(["detailImage"]).detailImage.map((e,index) =>{
return (
<div className={style.img} key={index}>
<img src={e} alt=""/>
<div className={style.icons}>
<Icon type="caret-left" onClick={()=>{this.toLeft(e)}} theme="outlined" />
<Icon type="delete" onClick={()=>{this.deleteImg(e)}} theme="outlined"/>
<Icon type="caret-right" onClick={()=>{this.toRight(e)}} theme="outlined" />
</div>
</div>
)
})
}
})()} <Button icon="plus" className={style.plus} onClick={this.selected2}/>
</div>
)}
</FormItem>
<FormItem{...formItemLayout} label="定制项选择">
{getFieldDecorator('switch', {valuePropName : 'checked'})(
<CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange}/>
)}
</FormItem>
<FormItem wrapperCol={{span : 12, offset : 6}}> <Button type="primary" htmlType="submit">提交</Button>
</FormItem> </Form>
<Photo ref="photo" radio={this.state.radio} chooiseImg={this.chooiseImg}/>
</Content>
</Layout>
);
}
}
第一次用dva开发，form表单验证都通过后 handleSubmit 提交事件中把数据发送到后端的地方有点搞不懂，是不是我用的组件不对，用form表单是不是需要用无状态组件，求大神给个思路
