같은 시간에 많은 자녀들의 상태를 어떻게 바꾸는가?

Question

무엇이 sittuation입니까?

I 사용자가 원하는 셀을 선택할 수있는 테이블을 렌더링하는 반응 구성 요소가 있습니다.

사용자는 격리 된 셀을 선택하거나 마우스를 계속 누르고 많은 셀을 한 번에 선택할 수 있습니다.

이 제대로 작동

, 당신은에서 볼 수 있습니다 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가 선택된 상태를 배열의 배열로 유지하고 큐브에 전달하여 큐브에 상태가없고 소품 만 제공하도록해야합니다. 이렇게하면 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) }