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

触发子组件方法

第一种办法：

 

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()
    }

}

 

第二种办法：

我们知道在子组件中可以通过 this.props.methodName 调用父组件方法

因此我们可以通过给子组件props添加一个事件，在子组件的constructor中执行，将子组件的this作为参数传入，这样我们就可以在父组件中拿到子组件中的this

举例：有Input组件，内部有clear方法，我们需要在Input外层触发Input组件内部的clear去清空当前输入框

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()
    }

}

在Input组件中

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: ''
        })
    }

}
    

 

 

 

触发兄弟组件的方法

原理和上面类似，假设父组件A有子组件B和C，如果要在B中触发C的方法，需要将C的实例通过props传递给A，然后在B中调用props触发A的方法，间接触发C

实例：Input组件中点击按钮后需要在List组件中添加一条数据：

父组件：

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>
        )
    }

}

Input组件：

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: ''
        })
    }

}

List组件：

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]
        })
    }

}