事件绑定：
import React from 'react';
import BodyChild from './bodychild';
import PropTypes from 'prop-types'; // 15.5版本后独立出新包
export default class BodyIndex extends React.Component{
constructor() {
super(); // 调用基类的所有初始化方法
this.state = {
name: 'xiaoming',
age: 20
}
}
changeAge(age) {
this.setState({
age: age
});
}
render(){
return (
页面的主体内容
{this.state.age}
)
}
}
子页面向父页面传递参数的方法：
parent:
import React from 'react';
import BodyChild from './bodychild';
import PropTypes from 'prop-types'; // 15.5版本后独立出新包
export default class BodyIndex extends React.Component{
constructor() {
super();
name: 'xiaoming',
age: 20
}
}
getbodychildData(event) {
this.setState({
age: event.target.value
})
}
render(){
return (
页面的主体内容
{this.state.age}
)
}
}
import React from 'react';
export default class BodyChild extends React.Component{
render(){
return (
bodychild 子页面
)
}
}
image.png
带参数父子组件通讯
父组件：
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import {
Table, Button, Row, Col,
Form, Select, Input, Icon,
Divider, Badge, Modal,
message, DatePicker
} from 'antd';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import Comment from './Comment';
@withRouter
@observer
class APIAuthority extends React.Component {
constructor(props) {
super(props);
// 评分组件绑定事件 通过变量绑定事件!!!
this.handleVar = this.handleOk.bind(this);
}
// 评分模态框确定按钮事件 子组件调用方法，带有参数 !!!
handleOk = ( values ) => {
console.log(values);
this.setState({
ModalText: 'The modal will be closed after two seconds',
confirmLoading: true,
});
setTimeout(() => {
this.setState({
visible: false,
confirmLoading: false,
});
}, 2000);
}
// 评论弹出窗取消事件
handleCancel = () => {
this.setState({
visible: false,
});
}
render() {
const { tabList, visible, confirmLoading, apiId } = this.state;
return (
);
}
}
export default Form.create({})(Comment)