React:面对一个问题来获取所选的表行ID

时间:2018-01-30 01:54:26

标签: javascript reactjs

有人可以指导我,我怎样才能编写一个代码,动态地给我选择的行索引号,以便我可以使用该索引来编辑/删除这一行?

我使用的代码:

handleRowSelect (index) {
    debugger;
    console.log(index);
    var myData = this.state.thisData;
    console.log(myData);
    var OK = _.indexOf(myData, myData[1]);
    var test = this.state.thisData[1];
    console.log(test);
};

在我的状态中指定索引thisData [1]给出了我期望的结果,但是不能让它变得动态,因为我正在学习React。 任何指导都会非常有用。

提前感谢

更新

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      thisData: []
    };
    let app = fire.database().ref('timelogdata');
    app.on('value', snapshot => {
      this.getData(snapshot.val());
    });
    this.taskOnSubmit = this.taskOnSubmit.bind(this);
    this.handleRowSelect = this.handleRowSelect.bind(this);
   }

   getData(values){
    let messagesVal = values;
    let messages = _(messagesVal)
                      .keys()
                      .map(messageKey => {
                          let cloned = _.clone(messagesVal[messageKey]);
                          cloned.key = messageKey;
                          return cloned;
                      })
                      .value();
      this.setState({
        thisData: messages
      });
  }

  handleOpen = () => {
    this.setState({open: true});
    };

  handleClose = () => {
    this.setState({open: false});
    };

  handleRowSelect (index) {
    debugger;
    console.log(index);
    // console.log(key);
    var myData = this.state.thisData;
    console.log(myData);
    var OK = _.indexOf(myData, myData[1]);
    var test = this.state.thisData[1];
    // var test = this.state.thisData[{i}];
    console.log(test);
    console.log(OK);
  };

  componentWillMount () {
    // let testData = [];
    // for (let i = 0; i < 10; i++) {
    //   testData.push({ code: `code${i}`, name: `name${i}`, group: `group${i % 2}` });
    // }
    this.setState({
      open: false
      // "thisData": testData
    });
  }

  componentDidMount() {

  }
  taskOnSubmit = (e) => {
    e.preventDefault();
    debugger;
    let newData = {"code": "code10", "name": "name10", "group": "group10"};
    // let dbCon = fire.database().ref('timelogdata');
    fire.database().ref('timelogdata').push(newData);
    var thisArray = this.state.thisData;
    let newRow = thisArray.push(newData);
    this.setState({
      thisData: thisArray
    });
  };

render() {
  const data = this.state.thisData.slice();
  const actions = [
    <FlatButton
      label="Cancel"
      primary={true}
      onClick={this.handleClose}
    />,
    <FlatButton
      label="Submit"
      primary={true}
      keyboardFocused={true}
      onClick={this.taskOnSubmit}
    />,
  ];
return (
      <MuiThemeProvider>
        <div style={{ height: 1000}}>
          <SussolReactTable
            columns={columns}
            tableData={data}
            cellDataKey="code"
            onSelection={this.handleRowSelect}
          />
          <RaisedButton 
            label="Dialog" 
            onClick={this.handleOpen} 
            backgroundColor="rgb(242, 101, 50)"
            />
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}>
          <TextField
            hintText="Username"
            floatingLabelText="Enter username"
            ref="loginUserName"
          /><br/>
          <TextField
            hintText="Username"
            floatingLabelText="Enter something"
            ref="loginSomething"
          />
        </Dialog>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default Test;

0 个答案:

没有答案