在React.js中，data-reactid破坏了html文本输入？

问题描述

嗨，我的React组件在html中呈现并可以处理一次。

Catch是“ data-reactid =”。0.0“”，这会打断输入并阻止您输入。 一旦我删除/更改此输入，即可再次工作。

我的React组件：

/** @jsx React.DOM */

var React = require('../../../../node_modules/react/react.js');
// react component DateBox will return a date time that updates every 50 miliseconds and appends it to a div with an id of 'date_box'
var GoogleSearchBox = React.createClass({
    GetValueFromGoogleSearchInput: function(event){
        var GoogleSearch = document.getElementById("google_search_input");
        var UserSearchQuery = GoogleSearch.value.toString().replace(/ /g,"+");
        var GET = "http://google.com/#q=" + UserSearchQuery;
        window.open(GET, '_blank');
    },
    //rendering the html elements with the state.clock
    render: function() {
        return (
            <div className="google_search">
                <input type="text" value="" placeholder="Type here to search google" name="google_search_input" id="google_search_input">
                </input>
                <div>
                    <button id="google_search_button" onClick={this.GetValueFromGoogleSearchInput}></button>
                </div>
            </div>
        );
    }
}); 
//rendering with react to put onto the html
module.exports = GoogleSearchBox;

如何在html中呈现：

<div id="google_search_box">
    <div class="google_search" data-reactid=".0">
        <input type="text" value="" placeholder="Type here to search google" name="google_search_input" id="google_search_input" data-reactid=".0.0">
        <div data-reactid=".0.1">
            <button id="google_search_button" data-reactid=".0.1.0"></button>
        </div>
    </div>
</div>