Мой компонент диалогового окна не отображается в Reactjs - PullRequest
Новая
       16

Мой компонент диалогового окна не отображается в Reactjs

0 голосов
/ 03 мая 2018

У меня есть диалоговое окно имени компонента, и я хочу показать его при щелчке по всем другим компонентам. У меня есть основной компонент как 

class ImageEditor extends Component {

  constructor() {
    super();
    this.state = { images: [], redirect: 'no', imageId: '', isDialogOpen: 'no' };
  }

  componentDidMount() {
    let promise = apiGateway.getImages();
      promise.then((images) => {
        this.setState({ images: images });
      });
}

openDialog = () =>{
  this.setState({ isDialogOpen : 'yes' });
}

closeDialog = () =>{
this.setState({ isDialogOpen: 'no' });
}


deleteImage = (id) => {
  apiGateway.removeImage(id);
}

setRedirect = (id) => {
  this.setState({ redirect: 'yes', imageId: id });
}



renderImage(image,index){

  return(
    <div key={index}>
     <p>Title: {image.title}</p>
     <p>Description: {image.description}</p>
    <button onClick={(e)=> this.deleteImage(image._id)}>DELETE</button>
    <button onClick={(e)=> this.setRedirect(image._id)}>UPDATE</button>
    <button onClick={this.openDialog}>SHARE</button>
    <img className='image' src={image.link} width='100' height='100' alt='nature'/>
    <br/><br/>
    </div>
    );
}


  render() {
        const { redirect , isDialogOpen } =  this.state;
        if(redirect === 'yes'){
          return <Redirect to={`/update/${this.state.imageId}`}/>
        }

         if(isDialogOpen === 'yes'){
          <DialogBox />  ????????
        }
    return(  
                 <div>
                      <div>{
                        this.state.images.map((image,index)=>{

                          return this.renderImage(image,index);
                        })
                      }
                      </div>
                </div>
    );
  }

}

export default ImageEditor;

Когда кто-то нажимает на SHARE, я хочу, чтобы открылось диалоговое окно. Я не знаю, как я это делаю, т. Е. Загрузка компонента с dialogBox правильная или неправильная. Так что каждый совет или любое предложение определенно помогут мне. Вот мой компонент диалога (сейчас я получаю сообщение об ошибке: ожидал присваивания или вызова функции и вместо этого увидел выражение no-unused-expressionions) 

class DialogBox extends Component {

  render() {

    return(
        <div>
        <Dialog title="Dialog Title" modal={true} onClose={this.handleClose} buttons={ [{ text: "Close", onClick: () => this.handleClose() }] }>
                        <h1>Dialog Content</h1>
                        <p>More Content. Anything goes here</p>
        </Dialog>
        </div>
        );
  }

}

1 Ответ

0 голосов
/ 03 мая 2018

Вы можете сделать это: 

return (
  <div>
    <insert your other components>
    {this.state.isDialogOpen === 'yes' && <DialogBox />}
  <div>
)

Я бы посоветовал использовать булево вместо строки для isDialogOpen.

...