接著上一篇
搜索組件 - 父組件向子組件傳值(子組件調(diào)用父組件方法)
上一篇最后問到, 如果我想通過父組件中的事件來觸發(fā)子組件中的方法應該怎么做呢
首先, 第一步
子組件中寫一個方法
比如說例子中的獲取子組件input中的值
子組件js
getInputData = () => {
this.nameValue = this.state.nameValue;
this.idValue = this.state.idValue;
// 搜索時的值要傳入到父組件的接口.
// 所以牽扯到子組件向父組件傳值
// 1.在子組件中定義一個事件. 用父組件傳遞過來的屬性(props),是個函數(shù),
// 2. 呼叫這個函數(shù)把在子組件中拿到的值傳遞到父組件中的函數(shù)進行處理
this.props.getInitData(
this.nameValue,
this.idValue,
)
}
父組件中調(diào)用子組件的地方增加一個屬性onRef
父組件js
<SearchBox
onRef={this.onRef1} // 父組件調(diào)用子組件方法
/>
在父組件中寫入這個屬性的方法
父組件js
// 父組件調(diào)用子組件的方法
onRef1 = (ref) => {
this.child = ref;
}
父組件寫一個方法來觸發(fā)調(diào)用子組件中的方法
getChild = () => {
this.child.getInputData(); // 如果調(diào)用了話, 那么子組件中的this.props.getInitData會被觸發(fā),
// this.propsChildEvent這個方法也會被觸發(fā) 應該會打印input中的值
}
<Button onClick={this.getChild}>我是觸發(fā)父組件調(diào)用子組件方法的方法</Button>
子組件中要引用this.props.onRef
componentDidMount() {
this.props.onRef(this);
}
父組件js
class HomePage extends React.Component {
constructor() {
super();
this.state = {
}
}
// 一旦子組件點擊就會觸發(fā)此事件
propsChildEvent = (nameValue = '', idValue = '') => {
this.nameValue = nameValue;
this.idValue = idValue;
console.log('this.nameValue==',this.nameValue,
'this.idValue==',this.idValue
)
}
componentWillMount() {
this.getData(1)
}
getData = (1) => {
get('/api', {
pageNum,
pageSize: this.state.currentPageSize,
exchangeNo: this.idValue || '', // 從子組件中拿到的input中的值
})
.then((resp) => {
this.setState({
tableData: resp.data.data.result,
});
})
.catch((err) => {
message.error(err.message);
});
}
// 父組件調(diào)用子組件的方法
onRef1 = (ref) => {
this.child = ref;
}
getChild = () => {
this.child.getInputData(); // 如果調(diào)用了話, 那么子組件中的this.props.getInitData會被觸發(fā),
// this.propsChildEvent這個方法也會被觸發(fā) 應該會打印input中的值
}
render() {
return (
<div>
<SearchBox
onRef={this.onRef1} // 父組件調(diào)用子組件方法
getInitData={this.propsChildEvent}
getAparentAjax={() => this.getData(1)}
/>
<Button onClick={this.getChild}>我是觸發(fā)父組件調(diào)用子組件方法的方法</Button>
</div>
)
}
}
export default HomePage;
子組件js
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,
});
}
getInputData = () => {
this.nameValue = this.state.nameValue;
this.idValue = this.state.idValue;
// 搜索時的值要傳入到父組件的接口.
this.props.getInitData(
this.nameValue,
this.idValue,
)
}
componentDidMount() {
this.props.onRef(this);
}
// 獲取所有input中的值
onSearch = () => {
this.nameValue = this.state.nameValue;
this.idValue = this.state.idValue;
// 搜索時的值要傳入到父組件的接口.
this.props.getInitData(
this.nameValue,
this.idValue,
)
this.props.getAparentAjax();
}
render() {
return (
<div>
<Row gutter={16}>
<Col span={3}><span>名稱:</span></Col>
<Col span={6}>
<Input
placeholder="請輸入"
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="請輸入"
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;
在這里插入圖片描述
