onClickを使用しているとき、配列への入力値が無効になる

Question

ユーザーの入力から新しい名前を追加したい配列があります。私のコンポーネントでは私が持っている：

名を除き、この機能で動作します

<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> 

：

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

私は、ユーザーが名前を入力し、それを送信したときに取得しようとしている、それがで更新しますこの関数は配列を更新します（これが意味をなさないなら、これはまだ私にとってはかなり新しいものです）。私は私の状態で

：私は配列に名前（または文字列）を渡すための入力を取得するかどうかはわかりません

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

を、誰でも助けることができますか？

Answer 1

最初に、間違った要素にバインドされた入力更新ハンドラを追加しました。あなたは現在、ボタンにアタッチされているので、入力にアタッチしなければなりません！値あなたが入力を変更するたびに更新するために、あなたの入力にonChangeハンドラを追加します。

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

その後の変化を処理する新しい方法を作成：これは、入力を制御リアクトできるようになる

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

を、新しいプレーヤーを追加するときに使用できるように入力値を状態に設定します。次に、ハンドラーを設定して、新しいプレーヤーをクリックして追加します。代わりにスライスの、リセットを押し、ちょうど配列スプレッド構文を使用します。

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

これは、以前の状態のplayersプロパティプラスからplayers入力の値とランダムidだnameで新しい選手オブジェクトを設定します。