使用 React 设置隐藏和显示内容的条件

Question

我想在提交时说隐藏对话框并显示我的猫图片，非常新的反应，我已经做到了这一点，这是我需要在我的应用程序中设置的最后一个功能来添加其他更小的细节，如验证等......

我在实现此更改时遇到了问题，我是否也可以进行任何重构？

import React from 'react';

import ImageGrid from './ImageGrid';

import '../index.css'

// Material UI 
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Input from '@material-ui/core/Input'
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';





const DialogBox = () => {
  const [open, setOpen] = React.useState(false);
  
  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  // function to hide the dialog box and show the ImageGrid
  function showCats() {
    
    // Get the modal
    const startPage = document.getElementsByClassName('modal');

    // get the image elements
    const catImages = document.getElementsByTagName(ImageGrid);

    // target the submit button
    const button = document.getElementsByClassName('toggle');

    if (Input === '') {
      alert('Please enter a valid search')
      button.current.disabled = true;
    } else if (Input === String) {
      startPage.style.display = 'none';
      catImages.style.display = 'show';
    } else {
      button.style.display = 'disabled'
    }

    showCats();
    
  }

  const handleSubmit = () => {
    console.log('i work')
    showCats()
  }

  return (
    <div className='modal'> 
      <Grid container justifyContent='center'>
        {/* Button To Open Dialog Box */}
        <Button 
        style={{border: '1px solid #ebc340', color: '#ebc340'}}
        variant="outlined" 
        color="secondary" 
        onClick={handleClickOpen}>
          Welcome to my Case Study, Click to begin
        </Button>
      </Grid>
        {/* Dialog Box Content */}
        <Dialog
        className='dialog-btn'
        open={open} 
        onClose={handleClose}>
          <DialogTitle>
            To begin the application, please insert your URL below:
          </DialogTitle>
          <DialogContent>
          <Input 
          placeholder="Enter Your Link Here" 
          // inputProps={ariaLabel} 
          fullWidth/>
          </DialogContent>

          {/* Dialog Box Actions */}
          <DialogActions>
            <Button 
            onClick={handleClose} 
            color="secondary">
              Cancel 
            </Button>
            
            <Button 
            className='toggle'
            onClick={handleSubmit}
            color='primary'
            autoFocus
            type='submit'>
              Submit
            </Button>
          </DialogActions>
        </Dialog>
    </div>
  );
}


export default DialogBox

Answer 1

在 handleSubmit 函数中将 open 设置为 false：

import React from 'react';

import ImageGrid from './ImageGrid';

import '../index.css'

// Material UI 
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Input from '@material-ui/core/Input'
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';





const DialogBox = () => {
  const [open, setOpen] = React.useState(false);
  const [url, setUrl] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = () => {
   setOpen(false)
  }

  return (
    <div className='modal'> 
      <Grid container justifyContent='center'>
        {/* Button To Open Dialog Box */}
        <Button 
        style={{border: '1px solid #ebc340', color: '#ebc340'}}
        variant="outlined" 
        color="secondary" 
        onClick={handleClickOpen}>
          Welcome to my Case Study, Click to begin
        </Button>
      </Grid>
        {/* Dialog Box Content */}
        <Dialog
        className='dialog-btn'
        open={open} 
        onClose={handleClose}>
          <DialogTitle>
            To begin the application, please insert your URL below:
          </DialogTitle>
          <DialogContent>
          <Input 
            placeholder="Enter Your Link Here" 
            fullWidth
            onChange={(e)=> setUrl(e.target.value)}
          />
          </DialogContent>

          {/* Dialog Box Actions */}
          <DialogActions>
            <Button 
            onClick={handleClose} 
            color="secondary">
              Cancel 
            </Button>
            
            <Button 
            className='toggle'
            onClick={handleSubmit}
            color='primary'
            autoFocus
            type='submit'>
              Submit
            </Button>
          </DialogActions>
        </Dialog>

     {/* Show the image */}
     {!open && url.trim() 
      ? <img src={url} alt="cat"/>
      : <p>Open the dialog and insert your url to see the image<p/>
      }
    </div>
  );
}


export default DialogBox

使用 React 设置隐藏和显示内容的条件

setting a condition to hide and show content using React

javascript

function

reactjs

react-hooks