Come ottenere il valore del testo di input al momento del clic in ReactJS

Question

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.

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

Answer 1

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>

Answer 2

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