2016-07-18 44 views
19

Sto imparando ReactJS e voglio capire come ottenere i valori del testo di input in ReactJS utilizzando un semplice evento onclick. Ho seguito il tutorial e anche se sono in grado di ottenere il parametro di input del testo. Ma in qualche modo non sono in grado di ottenere il suo valore. So che questa è una domanda stupida, ma sono alle prese con questo. Per favore controlla il mio codice e fammi sapere cosa c'è che non va.Come ottenere il valore del testo di input al momento del clic in ReactJS

var MyComponent = React.createClass({ 
    handleClick: function() { 
    if (this.refs.myInput !== null) { 
     var input = this.refs.myInput; 
      var inputValue = input.value; 
     alert("Input is", inputValue); 
    } 
    }, 
    render: function() { 
    return (
     <div> 
     <input type="text" ref="myInput" /> 
     <input 
      type="button" 
      value="Alert the text input" 
      onClick={this.handleClick} 
     /> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <MyComponent />, 
    document.getElementById('container') 
); 

Ecco jsfiddle per lo stesso: jsfiddle link

risposta

31

Prima di tutto non si può non passare per alert secondo argomento, utilizzare la concatenazione invece

alert("Input is " + inputValue); 

Example

Tuttavia, al fine di ottenere i valori di input da un migliore utilizzo stati In questo modo

var MyComponent = React.createClass({ 
 
    getInitialState: function() { 
 
    return { input: '' }; 
 
    }, 
 

 
    handleChange: function(e) { 
 
    this.setState({ input: e.target.value }); 
 
    }, 
 

 
    handleClick: function() { 
 
    console.log(this.state.input); 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <div> 
 
     <input type="text" onChange={ this.handleChange } /> 
 
     <input 
 
      type="button" 
 
      value="Alert the text input" 
 
      onClick={this.handleClick} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <MyComponent />, 
 
    document.getElementById('container') 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

5

Ci sono due modi per andare a fare questo.

  1. Creare uno stato nel costruttore che contiene l'immissione del testo. Allegare un evento onChange alla casella di input che aggiorna lo stato ogni volta. Quindi onClick puoi semplicemente avvisare l'oggetto stato.

  2. handleClick: function() { alert (this.refs.myInput.value); },

+2

qual è l'opzione migliore in questo caso? – ramirio

+0

il primo @ramirio mentre il secondo è deprecato ... –

Problemi correlati