React组件的Dom操作

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import PropTypes from 'prop-types';

class Dialog extends React.Component {
    static defaultProps = {};
    static propTypes = {
        title: PropTypes.string.isRequired
    }

    constructor(props) {
        super(props);//=>ES6中的EXTENDS继承,一旦使用了constructor,第一行位置必须设置SUPER执行
    }

    render() {
        return <section className='panel panel-default' style={{width: "60%", margin: '0 auto'}}>
            <div className='panel panel-heading' style={{fontSize: "20px", fontColor: 'red'}}>
                <h3>{this.props.title}</h3>
            </div>
            <div className='panel panel-body'>
                支持人数: <span ref="spanLeft">0</span>
                <br/>
                反对人数:<span ref="spanCenter">0</span>
                <br/>
                支持率:<span ref="spanRight">0</span>
            </div>
            <div className='panel panel-footer'>
                <button className='btn btn-success' onClick={this.support}>同意</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button className='btn btn-danger' onClick={this.against}>反对</button>
            </div>
        </section>
    }

    /*支持反对函数*/
    support = (ev) => {
        let {spanLeft} = this.refs;
        spanLeft.innerHTML++;
        this.computed()
    }
    against = (ev) => {
        let {spanCenter} = this.refs;
        spanCenter.innerHTML++;
        this.computed()
    }
    computed = (ev) => {
        let {spanRight, spanCenter, spanLeft} = this.refs;
        spanRight.innerHTML = (spanCenter.innerHTML + spanLeft.innerHTML) > 0 ? ((spanLeft.innerHTML / (spanCenter.innerHTML + spanLeft.innerHTML)) * 100) + "%" : "0%"
    }
}

let root = document.getElementById("root");
ReactDOM.render(<main>
    <Dialog title='士大夫受到收到'></Dialog>
    <Dialog title='士大夫受到收到'></Dialog>
    <Dialog title='士大夫受到收到'></Dialog>
</main>, root)

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import PropTypes from 'prop-types';

class Dialog extends React.Component {
    static defaultProps = {};
    static propTypes = {
        title: PropTypes.string.isRequired
    }

    constructor(props) {
        super(props);//=>ES6中的EXTENDS继承,一旦使用了constructor,第一行位置必须设置SUPER执行
    }

    render() {
        return <section className='panel panel-default' style={{width: "60%", margin: '0 auto'}}>
            <div className='panel panel-heading' style={{fontSize: "20px", fontColor: 'red'}}>
                <h3>{this.props.title}</h3>
            </div>
            <div className='panel panel-body'>
                支持人数: <span ref={x => this.spanLeft = x}>0</span>
                <br/>
                反对人数:<span ref={x => this.spanCenter = x}>0</span>
                <br/>
                支持率:<span ref={x => this.spanRight = x}>0</span>
            </div>
            <div className='panel panel-footer'>
                <button className='btn btn-success' onClick={this.support}>同意</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button className='btn btn-danger' onClick={this.against}>反对</button>
            </div>
        </section>
    }

    /*支持反对函数*/
    support = (ev) => {
        let {spanLeft} = this;
        spanLeft.innerHTML++;
        this.computed()
    }
    against = (ev) => {
        let {spanCenter} = this;
        spanCenter.innerHTML++;
        this.computed()
    }
    computed = (ev) => {
        let {spanRight, spanCenter, spanLeft} = this;
        let m = parseFloat(spanCenter.innerHTML),
            n = parseFloat(spanLeft.innerHTML),
            stae = (m + n) <= 0 ? "0%" : (n / (n + m) * 100).toFixed(2) + '%';
        spanRight.innerHTML = stae;
    }
}

let root = document.getElementById("root");
ReactDOM.render(<main>
    <Dialog title='士大夫受到收到'></Dialog>
    <Dialog title='士大夫受到收到'></Dialog>
    <Dialog title='士大夫受到收到'></Dialog>
</main>, root)