Question

我正在使用React创建一个测试组件，该组件在 ContainerA 和 ContainerB 中使用。

测试组件：

renderTitle(){

    let mode = this.modeType[this.state.mode];

    switch (mode){
        case 'A':
            title =
                <div onClick={this.switchMode.bind(this,'next')}>
                    <div>A</div>
                </div>;
            break;
        case 'B':
            title =
                <div onClick={this.switchMode.bind(this,'next')}>
                    <div>B</div>
                </div>;
            break;
        case 'C':
            title =
                <div onClick={this.switchMode.bind(this,'next')}>
                    <div>C</div>
                </div>;
            break;
        case 'D':
            title =
                <div>
                    <div>D</div>
                </div>;
            break;
    }

    return(
        <div className="d-flex justify-content-around">
            {title}
        </div>
    );
}

我发现模式A，B，C仅用于容器A ，而模式D仅用于容器B 。

所以我尝试将测试组件重构为以下内容：

renderTitle(){

    let mode = this.modeType[this.state.mode];

    let title = this.props.setTitle(mode);

    return(
        <div className="d-flex justify-content-around">
            {title}
        </div>
    );
}

并按如下所示更改容器：

容器A

export class ContainerA extends Component{

    setTitle(mode){

        switch (mode){
            case 'A':
                title =
                    <div onClick={this.switchMode.bind(this,'next')}>
                        <div>A</div>
                    </div>;
                break;
            case 'B':
                title =
                    <div onClick={this.switchMode.bind(this,'next')}>
                        <div>B</div>
                    </div>;
                break;
            case 'C':
                title =
                    <div onClick={this.switchMode.bind(this,'next')}>
                        <div>C</div>
                    </div>;
                break;
        }

        return title
    }

    render(){
        return(
            <div >
                <Test setTitle={this.setTitle.bind(this)}/>
            </div>
        )
    }
}

容器B

export class ContainerA extends Component{

    setTitle(mode){

        let test=    
            <div>
                <div>D</div>
            </div>;


        return title
    }

    render(){
        return(
            <div >
                <Test setTitle={this.setTitle.bind(this)}/>
            </div>
        )
    }
}

但是 switchMode（）在 test组件内部，那么如何设置onClick事件处理程序？

Answer 1

从子组件内部处理的事件来看，我用来在父组件中调用函数的解决方案如下。

父母阶级

class Parent extends React.Component {
    actualEvent(data) {
        // do something here
    }
    render() {
        return <Child onClick={this.actualEvent.bind(this)}/>
    }
}

儿童班

class Child extends React.Component {

    onClick(evt) {
        if (this.props.onClick)
            this.props.onClick(/* some data if required */);
    }
    render() {
        return (
            <div onClick={this.onClick.bind(this)}>whatever</div>
        )
    }
}

基本上，这个想法是在发生实际事件的子组件中，您从父级调用一个应用为属性的函数。

重构问题，尝试插入功能但失败

1 个答案: