Jak uzyskać wartość pola tekstowego w React?

Question

Właśnie zaczął używać React.js, a ja po prostu nie jestem pewien, czy istnieje specjalny sposób, aby uzyskać wartość pola tekstowego, powrócił w komponencie jak ten:

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

Jak opisano w documentation trzeba użyć kontrolowane wejście. Aby wejście - kontrolowanej trzeba określić dwa rekwizyty na nim

1. onChange - funkcja, która będzie ustawiona składnik state do wejścia value każdego wejścia czas jest zmieniany
2. value - wartość wejściową od komponentu state (this.state.value w przykładzie)

egzamin 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} 
     /> 
    ); 
    } 

Dokładniej o textarea - here

Answer 2

tylko wejście do aktualizacji wartość

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) }); 
    } 
}); 

Twoja wartość wprowadzania tekstu jest zawsze w stanie i można dostać to samo przez this.state.textVal