87,996
社区成员
发帖
与我相关
我的任务
分享React刚开始用,遇到个分页的问题
数据已经可以加载了，分页组件也加载出来了，只是分页操作点了不知道怎么触发查询（分页的时候需要把查询的参数带上。）
上面是一部分代码，已经放到服务器上了，可以访问12773.xyz,选择邮编查询地址即可，邮编可以输入：100023，谢谢!
var PageInfo = React.createClass({
queryPageInfo:function(event){
/*var totalcount = this.props.totalcount;
var totalpage = this.props.totalpage;
var currentpage = this.props.currentpage;*/
var nextPage = event.target.dataset.currpagehref;
var currentIndex = this.props.currentIndex;
// console.log(currentIndex);
console.log(nextPage);
//if(currentIndex==1){//邮编查询地址.
/*
这里不知道怎么触发查询函数.
下面这个写法没效果.
想触发下面这个函数,触发查询:
findQueryPostCode
*/
this.setState({
currentpage:nextPage
});
//}
},
pageInfoGet:function(){
var totalpage = parseInt(this.props.totalpage);
var currentpage = parseInt(this.props.currentpage);
var rows = [];
for (var i = 0; i< totalpage; i++) {
if((i+1)==currentpage){
rows.push(<li className="am-active"><a data-currpagehref={i+1} onClick={this.queryPageInfo} href="javascript:void(0)">{i+1}</a></li>);
}else{
rows.push(<li><a data-currpagehref={i+1} onClick={this.queryPageInfo} href="javascript:void(0)">{i+1}</a></li>);
}
};
return rows;
},
render:function(){
return (
<ul className="am-pagination">
{this.pageInfoGet()}
</ul>
);
}
});
/* 表格展示数据 */
var Table = React.createClass({
display: function(){
var rows = [];
if(this.props.tableData && this.props.tableData.error_code=='0' ){
// console.log(this.props.tableData.result.totalcount);
// console.log(this.props.tableData.result.totalpage);
// console.log(this.props.tableData.result.currentpage);
this.props.tableData.result.list.forEach((item)=>{
rows.push(<tr><td>{item.Province}</td><td>{item.City}</td><td>{item.District}</td><td>{item.PostNumber}</td><td>{item.Address}</td></tr>)
})
}
return rows;
},
render: function(){
return (
<table className="ui-table">
<thead>
<tr>
<td>省(自治区)</td>
<td>市(直辖市/自治州)</td>
<td>区(县)</td>
<td>邮编</td>
<td>地址</td>
</tr>
</thead>
<tbody>{this.display()}</tbody>
</table>
);
}
});
let Tab = React.createClass({
render: function(){
return (<div>{this.props.children}</div>);
}
});
let TabsControl = React.createClass({
getInitialState: function(){
return {currentIndex: 0}
},
getTitleItemCssClasses: function(index){
return index === this.state.currentIndex ? "tab-title-item active" : "tab-title-item";
},
getContentItemCssClasses: function(index){
return index === this.state.currentIndex ? "tab-content-item active" : "tab-content-item";
},
render: function(){
let that = this;
let {baseWidth} = this.props;
let childrenLength = this.props.children.length;
return (
<div>
<nav className="tab-title-items">
{React.Children.map(this.props.children, (element, index) => {
return (<div onClick={() => {this.setState({currentIndex: index})}} className={that.getTitleItemCssClasses(index)}>{element.props.name}</div>)
})}
</nav>
<div className="tab-content-items">
{React.Children.map(this.props.children, (element, index) => {
return (<div className={that.getContentItemCssClasses(index)}>{element}</div>)
})}
</div>
</div>
)
}
});
/* div整体 */
var DIV = React.createClass({
findCityByProvinceId:function(provinceId){
var result = null;
if(provinceId){
cityListJson.forEach((province)=>{
if(province.id==provinceId){
result=province.city[0].id;
if(result){
return ;
}
}
});
}
return result;
},
provinceValue: function(){
var s = ReactDOM.findDOMNode(this.refs.ProvinceObj);
return s ? s.value : '-1';
},
cityValue: function(){
var s = ReactDOM.findDOMNode(this.refs.CityObj);
return s ? s.value : '-1';
},
opnProvinceChangeValue: function(){
this.setState({
provinceVal: this.provinceValue(),
cityVal: this.findCityByProvinceId(this.provinceValue())
});
},
onCityChangeValue: function(){
this.setState({
cityVal: this.cityValue()
});
},
find: function(){
this.setState({
message:"完善中,别闹......"
})
},
findQueryPostCode:function(){
var postCode = ReactDOM.findDOMNode(this.refs.queryPostCode);
var clickPageParam = this.props.currentpage?this.props.currentpage:this.state.currentpage;
if(postCode){
var resultDataAjax = null ;
$.ajax({
type:"POST",
url:"youbian.php",
data:{queryPostCode:postCode.value,page:clickPageParam},
dataType:"json",
async:false,
success:function(resultdata){
resultDataAjax = resultdata;
}
})
if(resultDataAjax && resultDataAjax.error_code=='0'){
var totalcount = resultDataAjax.result.totalcount;
var totalpage = resultDataAjax.result.totalpage;
var currentpage = resultDataAjax.result.currentpage;
this.setState({
tableData:resultDataAjax,
totalcount:totalcount,
totalpage:totalpage,
currentpage:currentpage
});
}
}
},
getInitialState: function(){
return ({
provinceVal: this.provinceValue(),
cityVal: this.cityValue(),
tableData:"",
totalcount:"",
totalpage:"",
currentpage:"1"
});
},
render: function(){
return (
<div>
<h1 style={{color:'red',fontSize:72}}>{this.state.message}</h1>
<TabsControl>
<Tab name="地址查询邮编">
<div>
<ProvinceObj ref="ProvinceObj" data={cityListJson} onChange={this.opnProvinceChangeValue} />
<CityObj ref="CityObj" data={cityListJson} provinceValue={this.state.provinceVal} onChange={this.onCityChangeValue} />
<CountyObj ref="CountyObj" data={cityListJson} provinceValue={this.state.provinceVal} cityValue={this.state.cityVal} />
<input type="text" ref="queryKey" maxLength="30" placeholder="请输入要搜索的数据..."/>
<button className="ui-button" onClick={this.find}>查找</button>
</div>
</Tab>
<Tab name="邮编查询地址">
<div> <input type="number" ref="queryPostCode" maxLength="30" placeholder="请输入邮编..."/>
<button className="ui-button" onClick={this.findQueryPostCode}>查找</button></div>
</Tab>
<Tab name="试试百度">
<div className="yellow"/>
</Tab>
</TabsControl>
<Table tableData={this.state.tableData}/>
<PageInfo totalcount={this.state.totalcount} totalpage={this.state.totalpage} currentpage={this.state.currentpage}/>
</div>
);
}
});
/* 渲染 */
var BODY1 = document.getElementById("BODY1");
ReactDOM.render(<DIV />, BODY1);
上面是一部分代码，已经放到服务器上了，可以访问12773.xyz,选择邮编查询地址即可，邮编可以输入：100023，谢谢!
...全文
请发表友善的回复…
发表回复
JPF1024 2017-02-15
- 打赏
- 举报
谢谢，问题解决了。
JPF1024 2017-02-13
- 打赏
- 举报
你好，那怎么在findQueryPostCode里面引用params传过去的参数呢？
functionsub 2017-02-13
- 打赏
- 举报
// this.props.searchFn(params);params是参数，自己拼接吧。functionsub 2017-02-13
- 打赏
- 举报
第一步，把需要执行的search方法传入PageInfo组件里
<PageInfo totalcount={this.state.totalcount} totalpage={this.state.totalpage} currentpage={this.state.currentpage} searchFn={this.findQueryPostCode}/>var PageInfo = React.createClass({
queryPageInfo:function(event){
/*var totalcount = this.props.totalcount;
var totalpage = this.props.totalpage;
var currentpage = this.props.currentpage;*/
var nextPage = event.target.dataset.currpagehref;
var currentIndex = this.props.currentIndex;
// console.log(currentIndex);
console.log(nextPage);
//if(currentIndex==1){//邮编查询地址.
/*
这里不知道怎么触发查询函数.
下面这个写法没效果.
想触发下面这个函数,触发查询:
findQueryPostCode
*/
// self.props.searchFn(params);params是参数，自己拼接吧。
this.setState({
currentpage:nextPage
});
//}
},
pageInfoGet:function(){
var totalpage = parseInt(this.props.totalpage);
var currentpage = parseInt(this.props.currentpage);
var rows = [];
for (var i = 0; i< totalpage; i++) {
if((i+1)==currentpage){
rows.push(<li className="am-active"><a data-currpagehref={i+1} onClick={this.queryPageInfo} href="javascript:void(0)">{i+1}</a></li>);
}else{
rows.push(<li><a data-currpagehref={i+1} onClick={this.queryPageInfo} href="javascript:void(0)">{i+1}</a></li>);
}
};
return rows;
},
render:function(){
return (
<ul className="am-pagination">
{this.pageInfoGet()}
</ul>
);
}
});functionsub 2017-02-13
- 打赏
- 举报
findQueryPostCode:function(params){
var postCode = ReactDOM.findDOMNode(this.refs.queryPostCode);
var clickPageParam = this.props.currentpage?this.props.currentpage:this.state.currentpage;
if(params){
postCode = params.postCode || postCode ;
clickPageParam = params.clickPageParam || clickPageParam ;
}
if(postCode){
var resultDataAjax = null ;
$.ajax({
type:"POST",
url:"youbian.php",
data:{queryPostCode:postCode.value,page:clickPageParam},
dataType:"json",
async:false,
success:function(resultdata){
resultDataAjax = resultdata;
}
})
if(resultDataAjax && resultDataAjax.error_code=='0'){
var totalcount = resultDataAjax.result.totalcount;
var totalpage = resultDataAjax.result.totalpage;
var currentpage = resultDataAjax.result.currentpage;
this.setState({
tableData:resultDataAjax,
totalcount:totalcount,
totalpage:totalpage,
currentpage:currentpage
});
}
}
},var params = {};
params.postCode = xxx;
params.clickPageParam = xxx;
this.props.searchFn(params)
