React JS :需要拆分正在检索的状态对象
React JS :需要拆分正在检索的状态对象
提问于 2018-10-23 03:01:49
我有一个句柄点击函数，当我们单击行，并且该行的id被传递给handleClick函数时，它就会被调用，该函数从那里检索ID，并将其传递给API。但是它的格式是{stdID：" 02468 "}，我需要拆分它，只传递数字部分02468。我使用了split函数，但我得到的错误是split不是一个函数，我只需要检索状态对象的值部分，并将其传递到API以检索记录和链接或转到另一个页面。我已经检查了各种现有的Stackoverflow帖子，并试图复制相同的帖子，但都无济于事。请提供您的输入
import React, { PropTypes , Component } from 'react';
import {
Panel,
Button,
PageHeader,
ControlLabel,
FormControl,
Pagination,
Form,
import StatWidget from '../../src/components/Widget';
var alignment = {
marginLeft: "550px",
marginbottom: "100px"
}
class displayDetails extends Component {
constructor(props) {
super(props);
};
render() {
console.log('Child Component C Summary:',this.props.respData);
console.log('Child Component E Summary:',this.props.EData);
console.log('Child Component A Summary:',this.props.addData);
console.log('Child Component P Summary:',this.props.PData);
if(this.props.addData === undefined){
this.props.addData.FIELD 1="NA";
this.props.addData.FIELD 2="NA";
this.props.addData.FIELD 3="NA";
this.props.addData.FIELD 4="NA";
this.props.addData.FIELD 5="NA";
}
if(this.props.PData === undefined){
this.props.PData.FIELD 1="NA";
this.props.PData.FIELD 2="NA";
this.props.PData.FIELD 3="NA";
}
if(this.props.EData === undefined){
this.props.EData.FIELD 1="NA";
this.props.EData.FIELD 2="NA";
this.props.EData.FIELD 3="NA";
this.props.EData.FIELD 4="NA";
this.props.EData.FIELD 5="NA";
}
return (
<div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-primary"
icon="fa fa-dollar fa-5x"
count={this.props.respData.LIFE_TIME_SPEND}
headerText="Life Time Spend"
footerText="View Details"
linkTo="/blank"
/>
</div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-green"
icon="fa fa-phone fa-5x"
count={this.props.respData.BEST_HOME_PHONE}
headerText="Best Home Phone"
footerText="View Details"
linkTo="/"
/>
</div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-yellow"
icon="fa fa-home fa-5x"
count={this.props.respData.RESIDENCE_COUNTRY}
headerText="Country"
footerText="View Details"
linkTo="/"
/>
</div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-red"
icon="fa fa-shopping-bag fa-5x"
count={this.props.respData.BRAND_CODE}
headerText="Brand"
footerText="View Details"
linkTo="/"
/>
</div>
<div>
<tr>
<td><h1>{this.props.respData.FIELD 1} {this.props.respData.FIELD 2}</h1></td>
</tr>
</div>
<div className="col-lg-15">
<Panel header={<span>Customer Profile Data </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th> FIELD 1 </th>
<th> FIELD 2 </th>
<th> FIELD 3 </th>
<th> FIELD 4 </th>
<th> FIELD 5 </th>
<th> FIELD 6 </th>
<th> FIELD 7 </th>
<th> FIELD 8</th>
<th> FIELD 9</th>
<th> FIELD 10</th>
<th> FIELD 11</th>
<th> FIELD 12</th>
<th> FIELD 13</th>
<th> FIELD 14</th>
<th> FIELD 15</th>
<th> FIELD 16</th>
<th> FIELD 17</th>
</tr>
</thead>
<tbody>
<tr>
<td>{this.props.respData.FIELD 1}</td>
<td>{this.props.respData.FIELD 2}</td>
<td>{this.props.respData.FIELD 3}</td>
<td>{this.props.respData.FIELD 4}</td>
<td>{this.props.respData.FIELD 5}</td>
<td>{this.props.respData.FIELD 6}</td>
<td>{this.props.respData.FIELD 7}</td>
<td>{this.props.respData.FIELD 8}</td>
<td>{this.props.respData.FIELD 9}</td>
<td>{this.props.respData.FIELD 10}</td>
<td>{this.props.respData.FIELD 11}</td>
<td>{this.props.respData.FIELD 12}</td>
<td>{this.props.respData.FIELD 13}</td>
<td>{this.props.respData.FIELD 14}</td>
<td>{this.props.respData.FIELD 15}</td>
<td>{this.props.respData.FIELD 16}</td>
<td>{this.props.respData.FIELD 17}</td>
</tr>
</tbody>
</table>
</div>
</Panel>
<div className="col-lg-6">
<Panel header={<span>Phone </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>FIELD 1</th>
<th>FIELD 2 </th>
<th>FIELD 3 </th>
<th>FIELD 4 </th>
<th>FIELD 5 </th>
</tr>
</thead>
<tbody>
{this.props.PData.map((item, i) => {
return (
<tr key={i}>
<td> {item.FIELD 1}</td>
<td> {item.FIELD 2}</td>
<td> {item.FIELD 3}</td>
<td> {item.FIELD 4}</td>
<td> {item.FIELD 5}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Panel>
</div>
<div className="col-lg-6">
<Panel header={<span> Email </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>FIELD 1 </th>
<th>FIELD 2</th>
<th>FIELD 3</th>
<th>FIELD 4</th>
<th>FIELD 15</th>
</tr>
</thead>
<tbody>
{this.props.EData.map((item, i) => {
return (
<tr key={i}>
<td> {item.FIELD 1}</td>
<td> {item.FIELD 2}</td>
<td> {item.FIELD 3}</td>
<td> {item.FIELD 4}</td>
<td> {item.FIELD 5}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Panel>
</div>
<div className="col-lg-6">
<Panel header={<span>Address </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th> FIELD 1 </th>
<th> FIELD 2 </th>
<th> FIELD 3 </th>
<th> FIELD 4 </th>
<th> FIELD 5 </th>
<th> FIELD 6 </th>
</tr>
</thead>
<tbody>
{this.props.addData .map((item, i) => {
return (
<tr key={i}>
<td> {item.FIELD 1}</td>
<td> {item.FIELD 2}</td>
<td> {item.FIELD 3}</td>
<td> {item.FIELD 4}</td>
<td> {item.FIELD 5}</td>
<td> {item.FIELD 6}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Panel>
</div>
<div className="col-lg-6">
<Form>
<FormGroup controlId="formControlsDisabledButton" style={alignment}>
<Button bsStyle="primary" type="submit" disabled>Save</Button>
{' '}
<Button bsStyle="primary" type="reset" disabled>Cancel</Button>
</FormGroup>
</Form>
</div>
</div>
</div>
)
}
}
export default displayDetails;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52936112
复制相关文章
相似问题