我的react应用程序中有一个react表,它呈现事务行。我有一个逻辑,可以在单击按钮时添加一个新的空行。我希望这一行(并且只有这一行)是可编辑的,以便我可以使用它来创建新的事务。我试着用
Cell
column属性和cellInfo中的行索引。这只会使我正在测试的单个列可编辑,但该列中的其他单元格为空。
import React from 'react';
import axios from 'axios';
import ReactTable from "react-table";
import "react-table/react-table.css";
const API = 'http://127.0.0.1:8000/api/transactions/';
class Transactions extends React.Component {
constructor() {
super();
this.state = {
data: [],
isLoading: true,
error: null
};
this.fetchData = this.fetchData.bind(this);
this.handleAddTransaction = this.handleAddTransaction.bind(this);
this.renderEditable = this.renderEditable.bind(this);
}
handleAddTransaction() {
let newEmptyRow = {
date: "",
payee: "",
category: "",
amount: ""
}
const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
console.log(newEmptyRow);
this.setState(currentState => ({ data: insert(currentState.data, 0, newEmptyRow) }));
}
fetchData(state, instance) {
this.setState({
isLoading: true
});
axios.get(API).then(response => {
this.setState({
data: response.data.results,
isLoading: false
});
});
}
renderEditable(cellInfo) {
if(cellInfo.row._index === 0) {
return (
<div
style={{ backgroundColor: "#009999" }}
contentEditable
suppressContentEditableWarning
onBlur={e => {
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState({ data });
}}
dangerouslySetInnerHTML={{
__html: this.state.data[cellInfo.index][cellInfo.column.id]
}}
/>
);
}
}
render() {
const {
data,
isLoading
} = this.state;
return (
<div>
<button onClick={this.handleAddTransaction} type="button">New +</button>
<div>
<ReactTable
columns = {[
{
Header: 'Date',
accessor: 'date',
width: 200,
Cell: this.renderEditable
},
{
Header: 'Payee',
accessor: 'payee',
width: 400
},
{
Header: 'Category',
accessor: 'category',
width: 200
},
{
Header: 'Amount',
accessor: 'amount',
width: 200
},
{
Header: 'Balance',
accessor: 'balance',
width: 200
}]}
data = {data}
onFetchData={this.fetchData} // Request new data when things change
defaultPageSize = {500}
sortable = {false}
manual
style={{
// This will force the table body to overflow and scroll
// TODO Finalize height
height: "800px"
}}
loading={isLoading}
className="-striped -highlight"
/>
</div>
</div>)
};
}
export default Transactions;