接著上一篇文章繼續(xù) , 傳送門, 上一篇地址
搜索組件 - react中子組件向父組件中傳值
接著, 在上一篇中, 在父組件中拿到了子組件input框中的內(nèi)容值, 然后在父組件中使用, 接下來點(diǎn)擊搜索以后,我肯定是需要再次調(diào)用接口來重新渲染搜索的頁面的
所以 在父組件調(diào)用子組件的位置上添加一個(gè)屬性, 向子組件傳遞
<SearchBox
getInitData={this.propsChildEvent}
getAparentAjax={() => this.getData(1)}
/>
子組件中只需要使用this.props.getAparentAjax();就可以調(diào)用此方法
整個(gè)的代碼
父組件index.js
import React from 'react';
import TopHead from '../topToopbar/topHead.js'
import { Table, message } from 'antd';
import SearchBox from './searchBox.js';
import { get } from '../../util/http'
import { Link } from 'react-router-dom';
import moment from 'moment';
import $ from 'jquery';
class HomePage extends React.Component {
constructor() {
super();
this.state = {
nameValue: '',
idValue: '',
tableColumns: [],
tableData: [],
currentPageSize: 10,
}
this.tableColumns = [];
}
componentDidMount() {
// var that = this;
// $.ajax({
// type: 'get',
// url: 'http://10.70.119.183:8084//api?pageNum=1&pageSize=10&exchangeNo=',
// dataType: 'json',
// async: true,
// success: function(data) {
// that.setState({ arr: data.data });
// console.log(that.state.arr)
// }
// })
}
// 一旦子組件點(diǎn)擊就會(huì)觸發(fā)此事件
propsChildEvent = (nameValue = '', idValue = '') => {
this.nameValue = nameValue;
this.idValue = idValue;
console.log('this.nameValue==',this.nameValue,
'this.idValue==',this.idValue
)
}
componentWillMount() {
this.tableColumns.push({
title: '單號(hào)',
dataIndex: 'exchangeNo',
key: 'exchangeNo',
},
{
title: '獲取時(shí)間',
dataIndex: 'createTime',
key: 'createTime',
render: (text, record) => moment(record.createTime).format('YYYY-MM-DD'),
},
{
title: '操作',
key: 'action',
render: (text, record) => {
const data = JSON.stringify({ exchangeNo: record.exchangeNo });
return (
<span>
<Link to={`/platform/cascadeManage/exchangeUseDetail/${data}`}>使用詳情</Link>
</span>
);
},
}
);
this.getData(1)
}
getData = (pageNum) => {
get('/api', {
pageNum,
pageSize: this.state.currentPageSize,
exchangeNo: this.idValue || '', // 從子組件中拿到的input中的值
})
.then((resp) => {
this.setState({
tableData: resp.data.data.result,
resPages: resp.data.data,
loading: true,
currentPage: pageNum,
});
})
.catch((err) => {
message.error(err.message);
});
}
render() {
return (
<div>
<SearchBox
getInitData={this.propsChildEvent}
getAparentAjax={() => this.getData(1)}
/>
<Table pagination columns={this.tableColumns} dataSource={this.state.tableData} />
</div>
)
}
}
export default HomePage;
子組件searchBox.js
import React from 'react';
import { Link } from 'react-router-dom';
import { Input, message, Button, Row, Col } from 'antd';
class SearchBox extends React.Component {
constructor() {
super();
this.state = {
nameValue: '',
idValue: '',
}
}
changeFieldValue = (e, key) => {
const value = typeof e === 'object' ? e.target.value : e;
this.setState({
[key]: value,
});
}
// 獲取所有input中的值
onSearch = () => {
this.nameValue = this.state.nameValue;
this.idValue = this.state.idValue;
// 搜索時(shí)的值要傳入到父組件的接口.
// 所以牽扯到子組件向父組件傳值
// 1.在子組件中定義一個(gè)事件. 用父組件傳遞過來的屬性(props),是個(gè)函數(shù),
// 2. 呼叫這個(gè)函數(shù)把在子組件中拿到的值傳遞到父組件中的函數(shù)進(jìn)行處理
this.props.getInitData(
this.nameValue,
this.idValue,
)
// 3. 去父組件中引用子組件的地方定義一個(gè)函數(shù)來接收this.props.getInitData傳遞過來的值
// 4.點(diǎn)擊搜索以后, 還需要請(qǐng)求接口, 那么就需要子組件調(diào)用父組件方法, 或者說父組件向子組件傳遞方法,
// 這個(gè)和父組件向子組件傳值是相同的 都是用到了props
this.props.getAparentAjax();
}
render() {
return (
<div>
<Row gutter={16}>
<Col span={3}><span>名稱:</span></Col>
<Col span={6}>
<Input
placeholder="請(qǐng)輸入"
onChange={ (e) => { this.changeFieldValue(e, 'nameValue'); } }
value={this.state.nameValue}
/></Col>
</Row>
<Row gutter={16}>
<Col span={3}><span>id:</span></Col>
<Col span={6}>
<Input
placeholder="請(qǐng)輸入"
onChange={ (e) => { this.changeFieldValue(e, 'idValue'); } }
value={this.state.idValue}
width="320px"
/></Col>
</Row>
<Row gutter={16}>
<Col offset={3} span={4}>
<Button
type="primary"
style={{ marginLeft: '10px' }}
className="searchButton"
onClick={this.onSearch}
width="320px"
>
搜索
</Button></Col>
</Row>
</div>
)
}
}
export default SearchBox;
點(diǎn)擊搜索重新調(diào)用
image.png
上面是我點(diǎn)擊搜索的時(shí)候通過觸發(fā)onSearch事件, 才能調(diào)用this.props.getInitData 把它傳遞給父組件,我才能在父組件中拿到該值.
現(xiàn)在我不想通過點(diǎn)擊搜索來拿到input中的值, 子組件中只有一個(gè)搜索事件可以觸發(fā)使我拿到this.props.getInitData , 現(xiàn)在我在子組件中另外寫一個(gè)方法來觸發(fā)獲取this.props.getInitData , 那么我就需要在父組件中調(diào)用子組件的方法
接下來講解一下
