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