Come ottenere il valore della casella di testo in React?

Question

Ho appena iniziato a utilizzare React.js, e io non sono solo sicuro se c'è un modo speciale per ottenere il valore di una casella di testo, restituito in un componente come questo:

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

Come descritto nella documentation è necessario utilizzare ingresso controllato. Per fare un ingresso - controllato è necessario specificare due puntelli su di esso

1. onChange - funzione che fisserebbe componente state ad un ingresso value ogni volta che l'ingresso viene cambiato
2. value - valore di ingresso dalla componente state (this.state.value nell'esempio)

esame pio:

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

Più in particolare su textarea - here

Answer 2

solo aggiornare il tuo contributo all'imperdibile il valore

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

il valore di immissione del testo è sempre nello stato e si può ottenere lo stesso da this.state.textVal