我正在尝试编辑React Table中的行值。由于尚未连接后端，因此我从MockHTTPClient获取值并编辑值。 MockHTTPClient中的现有数据以模式显示，并且在模式状态下更改输入值时会更新。我需要在相关行的单元格中显示这些更新的值。
这是我的组件：
class NodeHeirarchyTable extends Component {
constructor(props) {
super(props);
// this.nodeHeirarchyData = {};
this.state = {
code: "",
nodeType: "",
name: "",
order: "",
show1: false,
show2: false
};
this.handleShow1 = this.handleShow1.bind(this);
this.handleShow2 = this.handleShow2.bind(this);
this.handleClose1 = this.handleClose1.bind(this);
this.handleClose2 = this.handleClose2.bind(this);
// this.save = this.save.bind(this);
}
handleShow1() {
this.setState({
show1: true
});
}
handleShow2() {
this.setState({
show2: true
});
}
handleClose1() {
this.setState({ show1: false });
}
handleClose2() {
this.setState({
show2: false
});
}
conmponentDidMount = () => {
this.onRowClick();
};
componentWillMount() {
debugger;
this.props.queryStart();
this.props.getHeirarchy();
}
handleShow = () => {
alert("I was clicked");
};
saveChanges = () => {
//e.preventByDefault();
this.props.editHeirarchy({
code: this.state.code,
nodeType: this.state.nodeType,
name: this.state.name,
order: this.state.order
});
console.log("Updated obj: ", this.state);
};
tableHeaders = [
{
Header: "CODE",
accessor: "code"
},
{
Header: "NODE TYPE",
accessor: "nodeType"
},
{
Header: "NAME",
accessor: "name"
},
{
Header: "ORDER",
accessor: "order"
},
{
Header: "ACTION",
accessor: "action",
Cell: ({ row }) => (
<div>
<ButtonToolbar>
<Button
type="submit"
variant="primary"
onClick={this.handleShow2}
class="btn-fill btn "
>
VIEW NODE
</Button>
<Button
type="submit"
variant="outline-info"
class="btn-fill btn btn-primary"
onClick={this.handleShow1}
>
EDIT NODE
</Button>
</ButtonToolbar>
<div />
<div />
</div>
)
}
];
Edit(e, row) {
this.props.history.push(
"/NodeHeirarchy/" + row._original.id + "/editHeirarchy"
);
}
handleEditButtonClick(e, row) {
console.log(row._original.id);
this.props.history.push("/NodeHeirarchy/editHeirarchy/" + row._original.id);
}
debugger;
handleCode = e => {
this.setState({
code: e.target.value
});
console.log("Code is ", this.state.code);
};
handleName = e => {
this.setState({
name: e.target.value
});
};
handleNodeType = e => {
this.setState({
nodeType: e.target.value
});
};
handleOrder = e => {
this.setState({
order: e.target.value
});
};
//To get the row id and column header of particular cell
onRowClick = (state, rowInfo, column, instance) => {
return {
onClick: async (e, handleOriginal) => {
console.log("Row Index : ", rowInfo.index);
console.log("Column Header :", column.Header);
//To set the row data into the state
const rowData = rowInfo.original;
await this.setState({
code: rowData.code,
nodeType: rowData.nodeType,
name: rowData.name,
order: rowData.order,
rowIndex: rowInfo.index
});
console.log(this.state);
if (handleOriginal) {
handleOriginal();
}
}
};
};
onSubmit = e => {
e.preventByDefault();
};
componentWillReceiveProps(nextProps) {
this.setState({
nodeType: nextProps.nodeType,
name: nextProps.name,
code: nextProps.code,
order: nextProps.order
});
//console.log("Hi", this.state);
}
render(rowInfo) {
const { TableListData, TableListLoading } = this.props;
var heirarchyTableList = null;
if (NodeHeirarchyTable == null) {
heirarchyTableList = "No data";
} else {
heirarchyTableList = (
<ReactTable
data={TableListData}
columns={this.tableHeaders}
getTdProps={this.onRowClick}
getTrProps={this.getTrProps}
// resolveData={data => data.map(row => row)}
/>
);
}
let loadingMsg = TableListLoading && <Alert>Loading</Alert>; //Show loading message
return (
<Grid fluid>
{/* VIEW MODAL */}
<Modal show={this.state.show2} onHide={this.handleClose2}>
<Modal.Body>
<Modal.Title>
<h4>
<b>VIEW NODE</b>
</h4>
</Modal.Title>
<ListGroup variant="flush">
<ListGroupItem>
CODE: {this.state && this.state.code}
</ListGroupItem>
<ListGroupItem>
NODE TYPE: {this.state && this.state.nodeType}
</ListGroupItem>
<ListGroupItem>
NAME: {this.state && this.state.name}
</ListGroupItem>
<ListGroupItem>
ORDER: {this.state && this.state.order}
</ListGroupItem>
</ListGroup>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose2}>Close</Button>
</Modal.Footer>
</Modal>
{/* EDIT MODAL */}
<Modal show={this.state.show1} onHide={this.handleClose1}>
<Modal.Header>
<Modal.Title>
<h4>
<b>EDIT NODE</b>
</h4>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div id="NodeHeirarchyForm">
<form class="container-fluid NodeHeirarchyForm">
<label>CODE</label>
<br />
<input
value={this.state.code}
style={{ width: "100%" }}
type="text"
onChange={this.handleCode}
/>
<br />
<br />
<label>NODE TYPE</label>
<br />
<select
value={this.state.nodeType}
style={{ width: "100%" }}
onChange={this.handleNodeType}
>
<option>Supplier</option>
<option>Consumer</option>
</select>
<br />
<br />
<label>NAME</label>
<br />
<input
value={this.state.name}
style={{ width: "100%" }}
onChange={this.handleName}
/>
<br />
<br />
<label>ORDER</label>
<br />
<input
value={this.state.order}
style={{ width: "100%" }}
type="number"
onChange={this.handleOrder}
/>
<br />
<br />
</form>
</div>
</Modal.Body>
<Modal.Footer>
<button
type="submit"
class="btn-fill btn btn-info"
data-container="body"
data-toggle="popover"
data-placement="top"
data-content="Message here"
onClick={this.saveChanges}
>
SAVE CHANGES
</button>
<button class="btn-fill btn btn-danger" onClick={this.handleClose1}>
Close
</button>
</Modal.Footer>
</Modal>
<Row>
<Col xs={12} md={12}>
{loadingMsg}
{heirarchyTableList}
</Col>
</Row>
</Grid>
);
}
}
NodeHeirarchyTable = reduxForm({
form: "NodeHierarchyform",
enableReinitialize: true
})(NodeHeirarchyTable);
function mapStateToProps(state) {
console.log("STATE", state.NodeHeirarchy.data);
return {
TableListData: state.NodeHeirarchy.data
};
}
function mapDispatchToProps(dispatch) {
return {
NodeHeirarchyActions: bindActionCreators(NodeHeirarchyActions, dispatch)
};
}
export default withRouter(
connect(
mapStateToProps,
NodeHeirarchyActions
)(NodeHeirarchyTable)
);
以下是我的逻辑：
createLogic({
type: NodeHeirarchyTypes.NODE_HEIRARCHY_EDIT,
latest: true,
debounce: 2000,
process({ MockHTTPClient, getState, action }, dispatch, done) {
dispatch(NodeHeirarchyActions.queryStart());
console.log("Calling edit_Heirarchy");
let HTTPClient;
if (MockHTTPClient) {
HTTPClient = MockHTTPClient;
} else {
HTTPClient = API;
}
let node = {};
node.code = action.payload.code;
node.nodeType = action.payload.nodeType;
node.name = action.payload.name;
node.order = action.payload.order;
console.log("Updated state ", node);
setTimeout(() => {
dispatch(NodeHeirarchyActions.editHeirarchySuccess(node));
dispatch(NodeHeirarchyActions.queryEnd());
done();
}, 2000);
return;