[解決済み】ReactでDOM要素にアクセスする方法は？Reactの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 (...);
    }

このReactコンポーネントを使いたいのですが。

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);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

handleClick10関数を実行し、選択したプログレスバーに対して操作を行いたいのですが、どうすればよいでしょうか？ しかし、私が得た結果は

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

react.jsで特定のElementを選択するには？

どのように解決するのですか？

の要素を取得するために react を使用する必要があります。 ref で、関数内部では ReactDOM.findDOMNode メソッドを使用します。

しかし、私がもっとやりたいのは、イベント内で直接参照元を呼び出すことです。

<input type="text" ref={ref => this.myTextInput = ref} />

これは、いくつかの良いリンクです を理解するのに役立ちます。