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