React三大属性之一props
组件实对象3大属性之一：props属性
1.每个组件对象都会有props（properties的简写）属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值：this.props.propertyName
4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）
5.对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
6.扩展属性：将对象的所有属性通过props传递
7.默认属性值
Person.defaultProps = {
name: 'Mary'
};
8.组件类的构造函数
constructor (props) {
super(props);
console.log(props); // 查看所有属性
}
举个例子(拆分两个组件 父组件给子组件传递参数和方法)
- 简单的一个修改的组件demo 如有不懂可以联系留言
import React,{Component} from 'react';
import axios from "axios";
import {Button, Modal, Form, Input, Radio, Select, DatePicker, Icon, Upload, message, Row, Col,Checkbox} from 'antd';
import moment from "moment";
const { Option } = Select;
const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
// eslint-disable-next-line
//子类组件
class extends React.Component {
render() {
//解构赋值 拿到父类的方法 和参数
const { visible, onCancel, onCreate, form ,dataInfo,foodList,addImg} = this.props;
const props = {
name: 'imgFile',
action: 'http://localhost:8080/react_navlink/foot/uploadPic.do',
headers: {
authorization: 'authorization-text',
},
onChange(info){
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
/*图传上传成功*/
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
// console.log(info.file.response.errorCode)
const imgs =info.file.response.errorCode
{
//调用父类传递过来的方法
addImg(imgs)
}
/*图片上传失败*/
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
const { getFieldDecorator } = form;
/*console.log(dataInfo)*/
return (
);
}
},
);
//父类组件
export default class Update extends Component{
state = {
dataInfo:{
footStyleId:"",
footName:"",
footDate:"",
footPage:"",
footImg:"",
footContent:"",
footType:"",
},
foodList:[],
visible: false,
};
addImg=(img)=>{
console.log(img)
this.setState({
footImg:img,
})
}
/*显示修改数据*/
showModal = () => {
this.queryData();
this.setState({ visible: true });
};
/*关闭修改界面*/
handleCancel = () => {
const { form } = this.formRef.props;
form.resetFields();
this.setState({ visible: false });
};
/*点击修改事件*/
handleCreate = () => {
const { form } = this.formRef.props;
console.log(form);
form.validateFields((err, values) => {
if (err) {
return;
}
let footChecked = "";
values.footPage.map((value,index)=>{
footChecked+=value+","
})
console.log(footChecked)
/*修改路径*/
axios.post("http://localhost:8080/react_navlink/foot/updateData.do",{
footId:this.props.footId,
footName:values.footName,
footContent:values.footContent,
footStyleId:values.footStyleId,
footImg:this.state.footImg,
footPage:footChecked,
}).then(resp=>{
this.props.queryListFoot();
}).catch(resp=>{
})
form.resetFields();
this.setState({ visible: false });
});
};
saveFormRef = formRef => {
this.formRef = formRef;
};
/*查询*/
queryData=()=> {
const footId = this.props.footId;
console.log(footId)
axios.get("http://localhost:8080/react_navlink/foot/updeInfo.do?footId="+footId)
.then(resp=>{
this.setState({
dataInfo:resp.data,
})
}).catch(resp=>{
alert("回显失败")
})
}
componentDidMount() {
axios.get("http://localhost:8080/react_navlink/style/queryList.do").
then(resp=>{
this.setState({
foodList:resp.data,
})
}).catch(resp=>{
alert("失败");
})
}
render() {
return(
{/*收集表单元素*/}
//给子类组件传递方法和参数