Question

假设我有这个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作为道具传递，但它没有起作用。有没有其他方法可以做到或有人建议改进此代码？

Answer 1

让我们尝试不同的方法

对话框组件文件

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

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

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

1 个答案: