react在组件中触发子组件方法以及触发兄弟组件

雪山坚石 發表於 2019-7-24 14:22:00

react在组件中触发子组件方法以及触发兄弟组件

触发子组件方法
第一种办法：
 
<div class="cnblogs_code">
<pre>class App extends React.Component{

render(){
 return (
 <React.Fragment>
 <button className="btn" onClick={this.clear.bind(this)}>清空</button>
 <Input ref="input"></Input>
 </React.Fragment>
 )
}

clear(){
 //通过refs拿到input组件对象，调用下面的方法
 this.refs.input.clear()
}

}</pre>
</div>
 
第二种办法：
我们知道在子组件中可以通过 this.props.methodName 调用父组件方法
因此我们可以通过给子组件props添加一个事件，在子组件的constructor中执行，将子组件的this作为参数传入，这样我们就可以在父组件中拿到子组件中的this
举例：有Input组件，内部有clear方法，我们需要在Input外层触发Input组件内部的clear去清空当前输入框
<div class="cnblogs_code">
<pre>class App extends React.Component{

render(){
 return (
 <React.Fragment>
 <button className="btn" onClick={this.clear.bind(this)}>清空</button>
 <Input inputEvent={this.inputEvent.bind(this)}></Input>
 </React.Fragment>
 )
}

inputEvent(input){
 //将子组件对象绑定到父组件的$child属性，这个属性名可以自己随便起
 this.$child = input
}

clear(){
 //点击按钮触发子组件clear方法
 this.$child.clear()
}

}</pre>
</div>
在Input组件中
<div class="cnblogs_code">
<pre>class InputComponent extends React.Component{
constructor(props){
 super(props)

 this.state = {
 inputVal: ''
 }
 //执行父组件的方法，将this传过去
 this.props.inputEvent(this)
}

render(){
 return (
 <div className="input-container">
 <input type="text" value={this.state.inputVal} onChange={this.inputChangeHandler.bind(this)} />
 </div>
 )
}

inputChangeHandler(e){
 this.setState({
 inputVal: e.target.value
 })
}

clear(){
 this.setState({
 inputVal: ''
 })
}

}
</pre>
</div>
 
 
 
触发兄弟组件的方法
原理和上面类似，假设父组件A有子组件B和C，如果要在B中触发C的方法，需要将C的实例通过props传递给A，然后在B中调用props触发A的方法，间接触发C
实例：Input组件中点击按钮后需要在List组件中添加一条数据：
父组件：
<div class="cnblogs_code">
<pre>class App extends React.Component{

render(){
 return (
 <React.Fragment>
 <button className="btn" onClick={() => this.$child_input.clear()}>清空</button>
 <Input inputEvent={input => this.$child_input = input} addEvent={item => this.$child_list.addRecord(item)}></Input>
 <List listEvent={list => this.$child_list = list}></List>
 </React.Fragment>
 )
}

}</pre>
</div>
Input组件：
<div class="cnblogs_code">
<pre>class InputComponent extends React.Component{
constructor(props){
 super(props)

 this.state = {
 inputVal: ''
 }

 this.props.inputEvent(this)
}

render(){
 return (
 <div className="input-container">
 <input type="text" value={this.state.inputVal} onChange={this.inputChangeHandler.bind(this)} />
 <button className="btn" onClick={() => this.props.addEvent(this.state.inputVal) }>Submit</button>
 </div>
 )
}

inputChangeHandler(e){
 this.setState({
 inputVal: e.target.value
 })
}

clear(){
 this.setState({
 inputVal: ''
 })
}

}</pre>
</div>
List组件：
<div class="cnblogs_code">
<pre>class MyList extends React.Component{

constructor(props){
 super(props)
 this.state = {
 data: [
 'Racing car sprays burning fuel into crowd.',
 'Japanese princess to wed commoner.',
 'Australian walks 100km after outback crash.',
 'Man charged over missing wedding girl.',
 'Los Angeles battles huge wildfires.'
 ]
 }
 this.props.listEvent(this)
}

render(){
 return (
 <ul className="list-container">
 {this.state.data.map((item, index) => (
 <li key={index}>{item}</li>
 ))}
 </ul>
 )
}

addRecord(item){
 this.setState({
 data: [...this.state.data, item]
 })
}

}</pre>
</div>
  
来源：https://www.cnblogs.com/xiaoliwang/p/11237747.html

頁: [1]

琼殿技术论坛's Archiver

react在组件中触发子组件方法 以及触发兄弟组件

react在组件中触发子组件方法以及触发兄弟组件