react--事件与数据的双向绑定

事件绑定：

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 (
      <div>
        <h2>页面的主体内容</h2>
        <p>{this.state.age}</p>
        <input type='button' value='点击事件' ref='inputobj' onClick={this.changeAge.bind(this, 999)} />
      </div>
    )
  }
}

子页面向父页面传递参数的方法：

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 (
      <div>
        <h2>页面的主体内容</h2>
        <p>{this.state.age}</p>
        <BodyChild toParentHandle={this.getbodychildData.bind(this)}/>
      </div>
    )
  }
}



import React from 'react';
export default class BodyChild extends React.Component{

  render(){
    return (
      <div>
        <p>bodychild 子页面</p>
        <input type='text' onChange={this.props.toParentHandle} />
      </div>
    )
  }
}

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 (
      <div className={cx('wrap')}>
        <Comment 
          visible={visible}
          confirmLoading={confirmLoading}
          apiId={apiId}
          handleCancel={this.handleCancel.bind(this)}
          handleOk={this.handleVar} //  传递给子组件的是变量 !!!
        />
      </div>
    );
  }
}

export default APIAuthority;



子组件：
/*
 * @component Comment
 * @author linzehong
 * @desc API管理-API权限列表-->评分弹出窗组件
 */
import React from 'react';
import { Modal, Button, Input, Rate, Row, Col, Form } from 'antd';
import utils from 'common/utils';
import styles from './Comment.scss';

const PREFIX = 'apicomment';
const cx = utils.classnames(PREFIX, styles);
const { TextArea } = Input;
const FormItem = Form.Item;

class Comment extends React.Component {
  constructor(props) {
    super(props);
  }

  // 确定按钮事件   !!!
  onHandleOk = (e) => {
    // 表单直接获取值，不用通过按钮
    this.props.form.validateFields((errors, values) => {
      if (errors) return;

      // 传递参数，调用父组件方法  通过props调用父组件的方法  !!!
      // 可以调用handleOk 是因为父组件绑定的handleVar变量等于handleOk方法
      this.props.handleOk(values);
    });
  }

  render() {
    const { visible, confirmLoading, handleCancel } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Modal title="评价"
          visible={visible}
          onOk={this.onHandleOk} // 调用自身方法  !!!
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
        >
          <Form>
            <Row>
              <Col span={24}>
                <FormItem
                  colon={false}
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                  label="评价资源"
                >
                  {getFieldDecorator('remak')(
                    <TextArea rows={4} />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <FormItem
                  colon={false}
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                  label="请打分"
                >
                  {getFieldDecorator('score', {
                    initialValue: 0,
                  })(
                    <Rate />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default Form.create({})(Comment)