Reagieren OnChange Set aber Eingabe noch schreibgeschützt

Question

Ich arbeite an Formular in ReactJs und ich füllen das Eingabefeld mit Wert aus Zustand. Aber mein Eingabefeld wird gerade erstellt. Obwohl ich die onChange-Funktion eingestellt habe.

handleNameChange(event) { 
    myEvent.name = event.target.value; 
}  

render(){ 
    return( 
     <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/> 
    ); 
} 

Ich verstehe dieses Verhalten nicht. Kann mir bitte jemand erklären? Danke

Answer 1

Um den Status einer Komponente in React zu ändern, müssen Sie this.setState verwenden. Nachdem Sie diese Methode aufgerufen haben, wird die Komponente mit den neuen Daten, die Sie festgelegt haben, erneut gerendert. Hier ist dein Beispiel mit setState:

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { name: 'Harambe' }; 
 
    this.handleNameChange = this.handleNameChange.bind(this); 
 
    } 
 

 
    handleNameChange(event) { 
 
    this.setState({ name: event.target.value }); 
 
    } 
 

 
    render() { 
 
    console.log(this.state); 
 
    return( 
 
     <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange} value={this.state.name}/> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<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="View"></div>

Answer 2

Grund ist, dass Sie eine Zustandsvariablen werden mit dem Textfeld Wert zu speichern, aber Sie sind nicht den Wert auf onChange Ereignisse zu aktualisieren, weil der, dass Ihr Text Feld nur gelesen wird, versuchen Sie dies:

handleNameChange(event) { 
    this.setState({name: event.target.value}); 
}  

render(){ 
    return( 
     <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/> 
    ); 
}