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传递

<Person {...person}/>

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 (
                <Modal
                    visible={visible}
                    title="Create a new collection"
                    okText="修改"
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form layout="vertical">
                        <Form.Item label="菜名">
                            {getFieldDecorator('footName',
                                {
                                //dataInfo 是父类传递过来的值
                                    initialValue: dataInfo.footName, /*默认值*/
                                },
                                {
                                    rules: [{ required: true, message: 'Please input the title of collection!' }], /*这里设置了验证条件*/
                                })(<Input />)}
                        </Form.Item>

                        <Form.Item label="评论">
                        {getFieldDecorator('footContent',
                            {
                                initialValue: dataInfo.footContent, /*默认值*/
                            },
                            {
                                rules: [{ required: true, message: 'Please input the title of collection!' }], /*这里设置了验证条件*/
                            })(<Input type="textarea" />)}
                         </Form.Item>

                        <Form.Item label="图片">
                            <div><img src={"http://localhost:8080/react_navlink/foot/readPic.do?footImg="+this.props.footImg} alt="图片展示"/></div>
                            {getFieldDecorator('footImg',
                                {
                                    initialValue: dataInfo.footImg, /*默认值*/
                                },
                                {
                                    rules: [{ required: true, message: 'Please input the title of collection!' }], /*这里设置了验证条件*/
                                })(<Upload {...props}>
                                <Button>
                                    <Icon type="upload" /> Click to Upload
                                </Button>
                            </Upload>)}
                        </Form.Item>
                        {/*单选*/}
                        <Form.Item label="是否开售">
                            {getFieldDecorator('footType',
                                {
                                    initialValue:dataInfo.footType, /*默认值*/
                                },)(<Radio.Group>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                </Radio.Group>
                                )}
                        </Form.Item>
                        <Form.Item label="配菜">


                            {getFieldDecorator('footPage',
                                {
                                    initialValue:dataInfo.footPage.split(","), /*默认值*/
                                },)(<Checkbox.Group style={{ width: '100%' }} >
                                    <Row>
                                        <Col span={8}>
                                            <Checkbox value="1">腐竹</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="2">豆皮</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="3">土豆</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="4">娃娃菜</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="5">香菇</Checkbox>
                                        </Col>
                                    </Row>
                                </Checkbox.Group>
                            )}
                        </Form.Item>
                        {/*时间*/}
                        <Form.Item label="上市时间">
                            {getFieldDecorator('footDate',
                                {
                                    initialValue:moment(dataInfo.footDate),
                                })
                            (<DatePicker/>)}
                        </Form.Item>

                        {/*菜系*/}
                        <Form.Item className="collection-create-form_last-form-item">
                            {getFieldDecorator('footStyleId', {
                                initialValue: dataInfo.footStyleId, /*默认值*/
                            })(
                                <Select style={{ width: 120 }} >
                                    {
                                        foodList.map((value,index)=>{
                                            return <Option key={index} value={value.styleId}>{value.styleName}</Option>
                                        })
                                    }

                                </Select>
                            )}
                        </Form.Item>

                    </Form>
                </Modal>
            );
        }
    },
);


//父类组件
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(
            <div>

                <Button type="primary" onClick={this.showModal}>
                    修改
                </Button>
                {/*收集表单元素*/}
                //给子类组件传递方法和参数
                <CollectionCreateForm foodList={this.state.foodList}
                                      wrappedComponentRef={this.saveFormRef}
                                      visible={this.state.visible}
                                      onCancel={this.handleCancel}
                                      onCreate={this.handleCreate}
                                      dataInfo={this.state.dataInfo}
                                      addImg={this.addImg}
                />

            </div>
        );
    }

}