如何在Reaction中访问DOM元素？Reaction中document.getElement

Question

如何在Reaction中访问DOM元素？Reaction中document.getElementById()的等价键是什么？

如何在react.js中选择某些条？

这是我的密码：

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

我想使用这个Reaction组件：

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },

我希望执行handleClick 10函数，并对所选的进度条执行操作。但我得到的结果是：

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

如何选择react.js中的特定元素？

Answer 1

你可以代替document.getElementById(this.state.baction).addPrecent(10);通过this.refs[this.state.baction].addPrecent(10); &nbsp;&nbsp;<Progressbar&nbsp;completed={25}&nbsp;ref="Progress1"&nbsp;id="Progress1"/>