onClick時に要素を取り除く反応

Question

onClickを押したときにdivを削除しようとしています。私は

render() { 
    const listPlayers = players.map(player => (
     <Counter 
     key={player.id} 
     player={player} 
     name={player.name} 
     sortableGroupDecorator={this.sortableGroupDecorator} 
     decrementCountTotal={this.decrementCountTotal} 
     incrementCountTotal={this.incrementCountTotal} 
     removePlayer={this.removePlayer} 
     handleClick={player} 
     /> 
    )); 

    return (
     <ContainLeft style={{ alignItems: 'center' }}> 
     <ProjectTitle>Score Keeper</ProjectTitle> 
     <Copy> 
      A sortable list of players that with adjustable scores. Warning, don't go negative! 
     </Copy> 
     <div> 
      <Stats totalScore={this.state.totalScore} players={players} /> 
      {listPlayers} 
     </div> 
     </ContainLeft> 
    ); 
    } 

を持っているところのdivは私の親コンポーネントに存在することが

return (
     <div 
     style={{ display: this.state.displayInfo }} 
     className="group-list" 
     ref={sortableGroupDecorator} 
     id="cell" 
     > 
     <CountCell style={{ background: this.state.color }}> 
      <Row style={{ alignItems: 'center', marginLeft: '-42px' }}> 
      <Col> 
       <DeleteButton onClick={removePlayer}> 
       <Icon name="delete" className="delete-adjust fa-minus-circle" /> 
       </DeleteButton> 
      </Col> 

ここで、ボタンがdiv要素を削除するには、子コンポーネントに小道具を渡す（私はので、コードの残りの部分を切り取らそれはアレイ（別ファイル）親コンポーネントにインポートされ、それがこの

ような読み出し）

ここで有用長くありませんでした

const players = [ 
    { 
    name: 'Jabba', 
    score: 10, 
    id: 11 
    }, 
    { 
    name: 'Han', 
    score: 10, 
    id: 1 
    }, 
    { 
    name: 'Rey', 
    score: 30, 
    id: 10 
    } 
]; 

export default players; 

私がしようとしているのは、メインの親に関数を書き込むことです。子の中をクリックすると、divは削除され、削除されます（最善の言葉が何であれ）。 add player "

私の親コンポーネントでは、console.logが子でクリックされたときに動作する関数を書いていますが、関数に書いたものは動作しないようです。

私が構築してる機能（進行中で、私はまだここに失わ少しだが）である：小道具

const listPlayers = players.map(player => (
    <Counter 
    key={player.id} 
    player={player} 
    name={player.name} 
    sortableGroupDecorator={this.sortableGroupDecorator} 
    decrementCountTotal={this.decrementCountTotal} 
    incrementCountTotal={this.incrementCountTotal} 
    removePlayer={this.removePlayer} 
    handleClick={player} 
    /> 
)); 

とに渡され、ここで上にマッピングされている

removePlayer() { 
    console.log('this was removed'); 
    players.splice(2, 0, 'Luke', 'Vader'); 
    } 

ここの子供：

render() { 
const { 
    name, 
    sortableGroupDecorator, 
    decrementCountTotal, 
    incrementCountTotal, 
    removePlayer 
} = this.props; 

return (
    <div 
    style={{ display: this.state.displayInfo }} 
    className="group-list" 
    ref={sortableGroupDecorator} 
    id="cell" 
    > 
    <CountCell style={{ background: this.state.color }}> 
     <Row style={{ alignItems: 'center', marginLeft: '-42px' }}> 
     <Col> 
      <DeleteButton onClick={removePlayer}> 
      <Icon name="delete" className="delete-adjust fa-minus-circle" /> 
      </DeleteButton> 

私はこれすべてが長いと知っているので、できるだけ詳細を提供したいリアクトはまだ私には新しく、私はいくつかの言い回しと混同します。事前にお手伝いいただきありがとうございます。

Answer 1

チャットでソートしました。予想通り、それは国家の問題でした。

私が説明として、コメント付きの小さな半擬似スニペットを作っ：

import React, { Component } from 'react'; 

// Your player constant, outside the scope of any React component 
// This pretty much just lives in your browser as a plain object. 
const players = [ 
    { 
    name: 'Jabba', 
    score: 10, 
    id: 11 
    }, 
    { 
    name: 'Han', 
    score: 10, 
    id: 1 
    }, 
    { 
    name: 'Rey', 
    score: 30, 
    id: 10 
    } 
]; 

class App extends Component { 

    constructor() { 
    super(); 

    this.state = { 
     players, // ES6 Syntax, same as players: players 
     // Add all your other stuff here 
    }; 
    } 

    removePlayer(id) { 
    const newState = this.state; 
    const index = newState.players.findIndex(a => a.id === id); 

    if (index === -1) return; 
    newState.players.splice(index, 1); 

    this.setState(newState); // This will update the state and trigger a rerender of the components 
    } 

    render() { 

    const listPlayers = this.state.players.map(player => { // Note the this.state, this is important for React to see changes in the data and thus rerender the Component 
     <Counter 
     .. 

     removePlayer={this.removePlayer.bind(this)} //bind this to stay in the context of the parent component 
     /> 
    }); 

    return (
     <div> 
     {listPlayers} 
     </div> 
    ); 
    } 
} 





//////////////////////////////////////// Child component 

.... 

<DeleteButton onClick={() => this.props.removePlayer(this.props.player.id)}> 

.... 

Answer 2

アプリ全体の仕組みを少し混乱させていますが、お手伝いします。

012を変更するには、playersをstateに入力する必要があります。だからremovePlayerthis.state.playersのコピーをローカル変数に入れてください（stateに直接配列を変更しないでください）、このローカル変数に分割を行い、最後にsetState({ players: localPlayers})に分割します。

このようにして「div」が削除されます。