reactjs - 将 react-table 行数据传递给 react-modal
问题描述
作为 React 的新手,我很难将数据从反应表传递到“编辑”模式,并且似乎无法找到类似问题的解决方案。数据通过 Axios API 调用从数据库中获取并呈现在 react-table 中。我需要将渲染行的数据传递给模式,然后发出放置请求并将数据更新到服务器。编辑按钮在模态类中,然后呈现在表格上。
下面你可以看到 modal&form 类,然后在 table 类中调用它。
import React, { Component, Fragment } from 'react';
import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label } from 'reactstrap';
import Axios from 'axios';
class CompanyModal extends Component {
constructor(props) {
super(props);
this.state = {
modal: props.initialModalState,
id: '',
title: '',
address: '',
phoneNumber : '',
email: ''
};
this.toggle = this.toggle.bind(this);
}
componentDidMount() {
if (this.props.company) {
const { id, title, address, phoneNumber, email } = this.props.company
this.setState({ id,title, address, phoneNumber, email});
}
}
onChange = e => {
this.setState({ [e.target.name]: e.target.value })
}
submitNew = e => {
e.preventDefault()
Axios.post('localhost:44394/api/companies/Create', this.state)
.then(res => {
console.log(res)})
.catch(error => {
console.log(error)
})
}
submitEdit = e =>{
e.preventDefault()
Axios.put(`localhost:44394/api/companies/update/${this.state.id}`, this.state)
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})
}
toggle () {
this.setState({
modal: !this.state.modal
});
}
render() {
const isNew = this.props.isNew;
let title = 'Edit Company';
let button = '';
if (isNew) {
title = 'Add Company';
button = <Button
color="success"
onClick={this.toggle}
style={{ minWidth: "200px" }}>Add Company</Button>;
} else {
button = <Button
className="btn-icon btn-round"
size="sm"
color="warning"
onClick={this.toggle}><i className="fa fa-edit" />
</Button>;
}
return <Fragment>
{button}
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>{title}</ModalHeader>
<ModalBody>
<Form onSubmit={this.props.company ? this.submitEdit : this.submitNew}>
<FormGroup>
<Label for="name">Name:</Label>
<Input type="text" name="title" onChange={this.onChange} value=
{this.state.Title === '' ? '' : this.state.Title} />
</FormGroup>
<FormGroup>
<Label for="address">Address:</Label>
<Input type="text" name="address" onChange={this.onChange} value=
{this.state.address === null ? '' : this.state.company} />
</FormGroup>
<FormGroup>
<Label for="phoneNumber">Phone Number:</Label>
<Input type="number" name="phoneNumber" onChange={this.onChange} value=
{this.state.phoneNumber === null ? '' : this.state.phoneNumber} />
</FormGroup>
<FormGroup>
<Label for="email">Email:</Label>
<Input type="email" name="email" onChange={this.onChange} value=
{this.state.email === null ? '' : this.state.email} />
</FormGroup>
<Button type="submit">Submit</Button>
</Form>
</ModalBody>
</Modal>
</Fragment>;
}
}
export default CompanyModal;
表代码
import React, { Component } from "react";
import ReactTable from "react-table";
import CompanyModal from "../Forms/CompanyModal";
import axios from "axios";
import {
Card,
CardBody,
CardHeader,
CardTitle,
Row,
Col,
Button,
ButtonToolBar
} from "reactstrap";
var data
class CompanyTable extends React.Component {
constructor(props) {
super(props);
this.state = {
posts:[]
};
}
componentDidMount(){
axios.get(`https://localhost:44394/api/companies`)
.then(res => {
const posts = res.data;
this.setState({posts});
})
}
render() {
const posts = this.props.posts;
const columns =[
{
Header: "Id",
accessor: "id",
show: false
},
{
Header: "Name",
accessor: "title"
},
{
Header: "Address",
accessor: "adress"
},
{
Header: "Phone Number",
accessor: "phoneNumber"
},
{
Header: "Actions",
Cell: props =>{
return (
<div className="actions-right">
<CompanyModal/>
<div/>
)
},
sortable: false,
filterable: false
}
]
return (
<>
<Row>
<Col xs={12} md={12}>
<Card>
<CardHeader>
<CardTitle tag="h4">Companies</CardTitle>
<CompanyModal isNew/>
</CardHeader>
<CardBody>
<ReactTable
data={this.state.posts}
filterable
columns = {columns}
defaultPageSize={10}
showPaginationTop
showPaginationBottom={false}
className="-striped -highlight"
/>
</CardBody>
</Card>
</Col>
</Row>
</>
);
}
}
export default CompanyTable;
解决方案
您可以使用componentDidUpdate
modal 组件来观察道具的变化并设置状态。
(componentWillReceiveProps
现已弃用)
假设您想将 propexampleProp
从 table view 传递到 modal view:
class CompanyModal extends Component {
constructor(props) {
super(props);
this.state = {
exampleState: 'something'
// ... other states
};
}
... other code
componentDidUpdate(nextProps) {
if (nextProps.exampleProp !== this.props.exampleProp) {// New prop value
this.setState({exampleState: nextProps.exampleProp})
}
}
... other code
在您的表格视图中:
Header: "Actions",
Cell: props =>{
return (
<div className="actions-right">
<CompanyModal exampleProp={this.state.yourTableViewState} />
<div/>
)
},
sortable: false,
filterable: false
}
推荐阅读
- android - 使用 pysical 游戏手柄来操作 android 应用程序
- windows - 使用 Visual Studio 时如何防止 BitBucket 凭据存储在 Windows 凭据管理器中?
- android - SQLITE3在使用android studio的android片段中传递重复和错误的数据
- node.js - 关键依赖:一个依赖的请求是socket.io和express的一个表达式
- blueprism - Application Modeller - 使用批处理文件的 Java 应用程序
- java - 春季云数据流 kubernetes 服务器中的组合任务运行程序失败
- python - 使用 Django 中的现有列值更新列的值
- c# - 将关键字“this”传递给子表单时不可用
- c - 在c中释放指针后如何保存指针地址
- oracle - 每当表行更新时,在 Oracle 数据库上添加列,该列存储当前日期/时间