в React.js data-reactid нарушает ввод текста в HTML?

Question

Привет, мой компонент React отображается в html и работает с одним уловом.

Поймать "data-reactid =". 0.0 "" это разрушает вход и не позволяет вам вводить его. Как только я удаляю/меняю это, вход снова работает.

Моя Реагировать компонент:

/** @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> 

Answer 1

Ваше текстовое поле не реагирует на ввод пользователя, потому что вы создали Controlled Component вручную установив value опору.

<input> с комплектом value является контролируемым компонентом. В контролируемом <input> значение визуализируемого элемента всегда будет отражать опору value.

Если вы хотите установить значение по умолчанию, но разрешите текстовому полю отвечать на ввод пользователя, рассмотрите настройку defaultValue.

<input type="text" defaultValue="" placeholder="Type here to search google" name="google_search_input" id="google_search_input">