React Eingabewert zu Array funktioniert nicht bei Verwendung von OnClick

Question

Ich habe ein Array, das ich möchte einen neuen Namen aus der Benutzereingabe hinzufügen. In meiner Komponente habe ich:

<div> 
    <h4>Add A Player</h4> 
    <input 
    type="text" 
    placeholder="Enter a new name" 
    value={this.state.newPlayerName} 
    /> 
    <button onClick={this.handleAddPlayer}> 
    Press to Add Player 
    </button> 
</div> 

, die mit dieser Funktion arbeitet bis auf den Namen:

handleAddPlayer = e => { 
    const players = this.state.players.slice(0); 
    players.push({ 
    name: '', 
    id: getRandomInt(20, 55) 
    }); 
    this.setState({ 
    players: players, 
    newPlayerName: e.target.value 
    }); 
}; 

Ich versuche zu bekommen, wenn ein Benutzer einen Namen eingibt und legt es, aktualisiert sie in der Funktion, die das Array aktualisiert (wenn das Sinn macht, entschuldigen Sie bitte, dass dies für mich noch ziemlich neu ist).

In meinem Zustand habe ich:

this.state = { 
    id: players.id, 
    totalScore: 0, 
    countInfo: [], 
    evilName: '', 
    color: '#6E68C5', 
    scoreColor: '#74D8FF', 
    fontAwe: 'score-icon', 
    incrementcolor: '', 
    scoreNameColor: 'white', 
    glow: '', 
    buttonStyle: 'count-button-start', 
    newPlayerName: '', 
    players 
}; 

Ich bin nicht sicher, wie die Eingabe zu erhalten, den Namen (oder String) an das Array zu übergeben, kann jemand helfen?

Answer 1

Zuallererst, Sie haben gebundene Eingabe-Update-Handler auf das falsche Element hinzugefügt! Sie haben es derzeit an eine Schaltfläche angehängt, Sie müssen es an den Eingang angehängt haben! Fügen Sie einen onChange Handler Ihre Eingabe den Wert zu aktualisieren, jedes Mal, wenn Sie die Eingabe ändern:

<input 
    type="text" 
    placeholder="Enter a new name" 
    value={this.state.newPlayerName} 
    onChange={this.handleChange} 
/> 

Dann erstellen Sie eine neue Methode, die die Änderung Griffe:

handleChange = e => { 
    this.setState({ 
    newPlayerName: e.target.value 
    }); 
} 

Auf diese Weise können reagieren, um die Eingabe steuern, Setzen Sie den Eingabewert in den Status, damit Sie ihn beim Hinzufügen eines neuen Players verwenden können. Richten Sie dann den Handler ein, um beim Klicken einen neuen Player hinzuzufügen. Statt Schneiden, Stoßen, das Zurücksetzen nur Array Verbreitung Syntax:

handleAddPlayer = e => { 
    this.setState(prevState => ({ 
    players: [...prevState.players, { 
     name: this.state.newPlayerName 
     id: getRandomInt(20, 55) 
    }] 
    })); 
} 

Diese players auf den früheren staatlichen players Eigenschaft und das neue Spieler-Objekt mit einem name gesetzt wird, dass die Wert der Eingabe ist und ein zufälliges id .