Question

什么是sittuation？

我有一个反应组件，用于呈现一个表，用户可以选择他们想要的任何单元格。

用户可以选择隔离的细胞或按住鼠标并一次选择多个细胞。

这很好，你可以在https://jsfiddle.net/gabirujoe/4drptu3f/

看到

要做到这一点，我有一个渲染表的组件，并且在渲染函数中我有一个for的内部，用于创建表的行和列。

在细胞内部，我有另一个反应成分，其状态标记是否被选中。此Component接收行和列作为属性，这是您的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>;
} });

有什么问题？

我有一个必要条件，当用户双击任何单元格时，我必须将此单元格的预定义轴中所有单元格的selected状态更改为true。可以是水平轴，垂直轴或对角轴。

任何人都知道如何找到预定义轴的单元格并在同一时间更改所有这些单元格的状态？

Answer 1

你应该让Tabela保持选中状态（作为数组的数组）并将其传递给Cube，这样Cube就没有状态，只有道具。这样，您可以将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) }

如何在React

1 个答案: