如何将函数传递给另一个反应组件？

debugcn 发表于 Dev

桑凯特·辛格

假设我有这个 Icon 组件，点击它会打开一个对话框

export default class Icon extends Component {


    look (imgdes, i) {
        const openDialog=()=> {
                    document.getElementById(i).style.display = "block";
      }

        const  closeDialog=()=> {
                document.getElementById(i).style.display = "none";
      }
        return (
                <div key={i} onClick={openDialog}>
                    <Dialog closed={closeDialog}/>
                </div>
            );
        }


    render () {
        return (
                <div className="pro" >
                    {this.state.img.map(this.look)}
                </div>
        );
    }
};

这是对话框组件，单击 span 标记制作的 X 后应将其关闭

    export default class Dialogbox extends Component {

  render() {
    return (
      <div className="Dialog">
         <span className="close" onClick={this.props.closed}>&times;</span>
      </div>
    );
  }
}

问题在于 opendialog 正在工作，但 closeDialog 不起作用。我试图将 closeDialog 作为道具传递，但没有奏效。有没有其他方法可以做到这一点，或者有人可以建议改进此代码？

汉纳德·雷曼

让我们尝试不同的方法

对话框组件文件

因为您需要多个对话框。我们需要标识符来唯一标识对话框，这就是我将使用数据属性的原因。

 export default class Dialogbox extends Component {
  render() {
    return (
      <div data-id={this.props.id} className="Dialog">
         <span data-id={this.props.id} className="close" onClick={this.props.closed}>&times;</span>
      </div>
    );
  }
}

图标组件文件

您正在使用 document.getElementById 。所以它必须有一个唯一的标识符 id。否则它将无法工作。这就是为什么我们将通过 props id 来唯一地标识每个对话框。

export default class Icon extends Component {
    constructor(props){
       super(props)
       this.look=this.look.bind(this);
       this.show=this.show.bind(this);
       this.close=this.close.bind(this);
       this.state = {open: false};
    }
    show(ev){
     const id=ev.target.dataset.id;
     document.getElementById(id).style.display='block';
     this.setState({open: true});
    }
    close(ev){
     const id=ev.target.dataset.id;
     document.getElementById(id).style.display='none';
     this.setState({open: false});
    }
    look (imgdes, i) {
        return (
                <div key={i} data-id={i} onClick={this.show}>
                    <Dialog closed={this.close} id={i}/>
                </div>
            );
        }

    render () {
        return (
                <div className="pro" >
                    {this.state.img.map(this.look)}
                </div>
        );
    }
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。