Eingabeelemente nicht aktualisiert in React

Question

Ich baue eine sehr einfache Anwendung Reagieren aber einige Probleme mit Formulareingaben mit: Mein Zustand:

class App extends Component { 
    constructor(){ 
    super(); 
    this.state = { 
    books: [], 
    book:{ 
     author:"", 
    title: "" 
    } 
    } 
    this.handleInputChange = this.handleInputChange.bind(this) 
} 

Meine Form:

<form onSubmit={this.addBook}> 
      <input 
      name="author" 
      type="text" 
      placeholder="author" 
      value={this.state.book.author} 
      onChange={this.handleInputChange} 
      /><br/> 
      <input 
      name="title" 
      type="text" 
      placeholder="title" 
      value={this.state.book.title} 
      onChange={this.handleInputChange} 
      /><br/> 
      <input type="submit" /> 
      <button>Update</button> 
      <button>Delete</button> 
     </form> 

Meine Event-Handler:

handleInputChange(event) { 
    this.setState({ 
     [event.target.name]: event.target.value 
    }); 
    } 

Noch kann ich nicht in das Eingabefeld eingeben. Wenn ich versuche, einen Wert zu setzen, passiert nichts und das Eingabefeld wird nicht korrekt aktualisiert. Irgendwelche Vorschläge? Danke

Answer 1

Ihr Buch Zustand ist state.book.title und state.book.author, so müssen Sie in setState angeben, dass es das state.book Objekt ist, dass Sie mit dem event.target aktualisieren möchten .Wert.

Hoffentlich wird dies den Trick:

handleInputChange(event) { 
    this.setState({ 
    book: { 
    ...this.state.book, 
    [event.target.name]: event.target.value 
    }, 
    }); 
} 

Wenn Zustand für verschachteltes Buchobjekt zu aktualisieren, müssen Sie eine Kopie davon machen, aber mit der Eigenschaft mögen Sie geändertenen Satz auf den neuen Wert. Hier hilft die Ellipsennotation.

Mehr Infos hier: How do I setState for nested array?

Answer 2

Die Titel/Autor Eigenschaften sind innerhalb des Buchobjekts. Es sieht so aus, als ob Sie nur auf state.author oder state.title verweisen, aber Sie müssen auf state.book.title oder state.book.author verweisen. Versuchen Sie folgendes:

handleInputChange(event) { 
    this.setState({ 
     book[event.target.name]: event.target.value 
    }); 
    }