Wie man Eingabe Text Wert auf Klick in ReactJS

Question

Ich lerne ReactJS und ich möchte verstehen, wie die Eingabe Textwerte in ReactJS mit einfachen Onclick-Ereignis zu bekommen. Ich habe dort Tutorial gefolgt und obwohl ich in der Lage bin, den Parameter der Texteingabe zu bekommen. Aber irgendwie kann ich seinen Wert nicht erreichen. Ich weiß, das ist eine dumme Frage, aber ich habe damit zu kämpfen. Bitte überprüfen Sie meinen Code und lassen Sie mich wissen, was damit nicht stimmt.

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

ist hier jsfiddle für das gleiche: jsfiddle link

Answer 1

Zuerst alles, was Sie können nicht nicht passieren zu alert Sekunden Argument verwenden Verkettung statt

alert("Input is " + inputValue); 

Example

jedoch ab, um Werte von Eingangs bessere Nutzung Staaten zu erhalten wie dieser

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

Es gibt zwei Möglichkeiten, um dies zu tun zu gehen.

1. Erstellen Sie einen Status im Konstruktor, der die Texteingabe enthält. Hängen Sie ein OnChange-Ereignis an das Eingabefeld an, das den Status jedes Mal aktualisiert. Dann könnten Sie onClick einfach das Zustandsobjekt alarmieren.

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