同じ時間に多くの子どもの状態をどのように変更するか

Question

坐剤とは何ですか？

私はユーザーが望む任意のセルを選択できるテーブルをレンダリングする反応コンポーネントを持っています。

ユーザは、隔離されたセルを選択したり、マウスを押し続けたりして、一度に多くのセルを選択することができます。

これが正常に動作している、あなたはで見ることができます。これを行うにはhttps://jsfiddle.net/gabirujoe/4drptu3f/

、私はテーブルをレンダリングするコンポーネントを持っている、とレンダリング機能では、私は行を作成するには、のために他の内部のために持っているとテーブルの列。

セルの中には、それが選択されているかどうかにかかわらず、マークする状態の別の反応成分があります。このコンポーネントは行と列をプロパティとして受け取ります。これはあなたのIDです。

var Tabela = React.createClass({ 
getInitialState(){ 
    return {mouseDown:false}; 
}, 
handleMouseDown(event) { 
    this.setState({mouseDown: true}); 
}, 
handleMouseUp(event) { 
    this.setState({mouseDown: false}); 
}, 
render() { 
    const list = []; 
     for (let i = 0; i< 6; i++){ 
      const cubes = []; 
      for (let j = 0; j< 6; j++){ 
       cubes.push(<td><Cube r={i} c={j} selected={false} 
       mouseDown={this.state.mouseDown} /> </td>); 
      } 
      list.push(<tr >{cubes}</tr>); 
     } 
     return (
      <div className="table" onMouseDown={this.handleMouseDown} 
        onMouseUp={this.handleMouseUp} onMouseLeave={this.handleMouseUp}> 
        <table>{list}</table> 
      </div> 
     ) 
}}); 

var Cube = React.createClass({ 
getInitialState(props){ 
    return {selected: this.props.selected}; 
}, 
handleMouseDown(event) { 
    this.setState({selected: !this.state.selected}); 
}, 
handleMouseEnter(event) { 
    if(this.props.mouseDown) 
     this.setState({selected: !this.state.selected}); 
}, 
render() { 
    let cn = "cube"; 
    cn += ((this.state.selected) ? " selected" : ""); 
    return <div className={cn} onMouseDown={this.handleMouseDown} 
    onMouseEnter={this.handleMouseEnter}> {"["+this.props.r+","+ this.props.c +"]"} </div>; 
} }); 

問題は何ですか？

私は、ユーザーが任意のセルをダブルクリックすると、このセルの定義済み軸のすべてのセルの選択状態をtrueに変更する必要があります。水平軸、垂直軸または対角線軸になります。

誰も私が定義済みの軸のセルを見つけて、これらのすべてのセルの状態を同じ時間に変更できますか？

Answer 1

Tabelaに選択された状態（配列の配列として）を保持させ、キューブに状態を持たないようにキューブに渡す必要があります。小道具のみです。こうすることで、タブラからキューブにダブルクリックハンドラを渡すことができます。

In Tabela: 

handleDoubleClick: function (rowIndex, colIndex) { 
    var selected = this.state.selected; 
    var row = this.state.selected[rowIndex]; 
    // here i am inversing the row 
    for (let r; r < row.length; r++) { 
     row[r] = !row[r]; // inverse state 
    } 
    this.setState({ selected: selected }); 
} 

<Cube selected={ this.state.selected[i][j] } onDoubleClick={ this.handleDoubleClick.bind(null, i, j) }