Почему React material-ui не открывается правильно? - PullRequest
Новая
       43

Почему React material-ui не открывается правильно?

0 голосов
/ 18 октября 2019

У меня проблема с библиотекой материалов, в частности с компонентом. У меня есть два диалога в одном компоненте, которые открываются после нажатия на определенные кнопки. Проблема в том, что один из них открывается нормально, но при нажатии второй кнопки (чтобы вызвать открытие второго диалогового окна) он закрывает все компоненты, единственное, что отображается в DOM, - это пустой div, подобный этому:

Как вы думаете, что может быть причиной этого?

Я перепробовал все найденные решения, я также пытался заменить код диалога в каждом месте, где он появляется в компоновке компонентов.

Может ли это быть ошибкой в ​​Material-UI?

Вот ссылка на компонент Dialog для Material-UI: https://material -ui.com / components / dialogs / # dialogs 

    <Dialog open={state.open} onClose={handleClose}>
    <DialogTitle>Новая группа</DialogTitle>
    <DialogContent>
        <form>
            <FormControl>
                <input onChange={handleChange('age')} value={state.data.inputName} placeholder="Новая группа"></input>                                    
                <Button onClick={addNewAreaOne}>Добавить</Button>
                <Button onClick={handleClose}>Закрыть</Button>
            </FormControl>
            <br/>
        </form>
    </DialogContent>    
</Dialog>

    <Dialog open={state.open3} onClose={handleClose3}>
    <DialogTitle>Изменения</DialogTitle>
    <DialogContent>
        <form>
            <FormControl>
                <input onChange={handleChange3('newName')} value={state.newName} placeholder="Название группы"></input>                                    
                <Button onClick={updateAreaTwo}>Изменить</Button>
                <Button onClick={handleClose3}>Закрыть</Button>
            </FormControl>
            <br/>
        </form>
    </DialogContent>
</Dialog>

изменение состояния следующим образом: 

    const handleClose3 = () => {
        setState({ ...state, open3: false });
    };

    const handleClickOpen3 = () => {
       globalActions.setAreaThreeShow(false);
       setState({ ...state, open3: true });  };

объявление состояния: 

    const [state, setState] = useState({
        data: {
            myItems: [],
            open4: false
        },
        open: false,
        age: '',
        open3: false,
    });
...