Как получить значение текстового поля в React?

Question

Я только начал использовать React.js, и я просто не знаю, есть ли специальный способ, чтобы получить значение текстового поля, возвращается в компоненте, как это:

var LoginUsername = React.createClass({ 
    render: function() { 
    return (
     <input type="text" autofocus="autofocus" onChange={this.handleChange} /> 
    ) 
    }, 
    handleChange: function (evt) { 
    this.setState({ value: evt.target.value.substr(0, 100) }); 
    } 
}); 

Answer 1

Как описано в documentation вы должны использовать контролируемый вход. Для того, чтобы вход - контролируемого вам нужно указать два реквизита на нем

1. onChange - функция, которая будет установить компонент state на вход value каждый вход время изменяется
2. value - входное значения от компонента state (this.state.value в примере)

Экзамен PLE:

getInitialState: function() { 
    return {value: 'Hello!'}; 
    }, 
    handleChange: function(event) { 
    this.setState({value: event.target.value}); 
    }, 
    render: function() { 
    return (
     <input 
     type="text" 
     value={this.state.value} 
     onChange={this.handleChange} 
     /> 
    ); 
    } 

Более конкретно о - текстовое поле here

Answer 2

просто обновить свой вклад в значение

var LoginUsername = React.createClass({ 
    getInitialState:function(){ 
    return { 
     textVal:'' 
    } 
}, 
    render: function() { 
    return (
     <input type="text" value={this.state.textVal} autofocus="autofocus" onChange={this.handleChange} /> 
    ) 
    }, 
    handleChange: function (evt) { 
    this.setState({ textVal: evt.target.value.substr(0, 100) }); 
    } 
}); 

текст входного значения всегда находится в состоянии, и вы можете получить то же самое, this.state.textVal