Блог

Главная - Вопросы по программированию - Материал — значок пользовательского интерфейса, мешающий работе кнопки

Материал — значок пользовательского интерфейса, мешающий работе кнопки

#reactjs #material-ui

Вопрос:

Когда я нажимаю в пространстве вокруг значка,кнопка работает правильно, и сообщение удаляется.Но при нажатии на значок (<DeleteOutlineOutlinedIcon />) сообщение не удаляется.Как указано в названии кнопки props.id, когда я регистрирую имя, оно отображается неопределенным, я также пытался дать такое же имя значку, но все равно это не работает.

 <button name={props.id} onClick={deletePost}><DeleteOutlineOutlinedIcon /></button>

Это deletePost функция

 function deletePost(e){
        e.preventDefault();
        if(window.confirm("Are you sure to delete"))
        {
            let {name} = e.target;
            console.log(name);
            $.post("http://localhost:4000/delete" , {name})
            .done(res=>{
                setAll({value:res});
                console.log(allPosts);
            })
            .fail(e=>{console.log(e);})
        }
        
    }

Ответ №1:

В идеале вы должны обернуть компоненты значков MUI <IconButton> </IconButton> , которые вы можете импортировать, используя import {IconButton} from '@material-ui/core' , чтобы в вашем случае это было <IconButton onClick={deletePost}><DeleteOutlineOutlinedIcon /></IconButton>

Изменить: чтобы получить правильное значение для name свойства, попробуйте:

  let name = e.target.getAttribute('name');

И, кстати, некоторые имена атрибутов, не совсем уместно использовать в таком состоянии и в некоторых ситуациях может привести к нежелательному поведению (например, пытаясь установить имя атрибута <th> HTML-элемента) необходимо часть данных (переменной), которая, как правило, не должно быть сделано таким образом, как вы могли так легко сделать, deletePost(e,props.id) давая props.id в качестве параметра в функцию.

Комментарии:

1. имя все еще не определено

2. О. вы добавили свойство name во внешний IconButton компонент? Б. откуда это props.id берется? вы убедились, что все сделали правильно? и как вы это регистрируете? где это связано с проблемой, которая не может вызвать событие кнопки, нажав на вложенный значок, решение, которое я предложил в своем ответе, решает.

3. Да, я поставил его прямо на IconButton и также я убедился, что props.id на самом деле правильно, я зарегистрировал его, пока компоненты печатают на экране, он успешно регистрируется, возникает проблема, что при нажатии на кнопку он отображается неопределенным. Кнопка фактически берется из массива сопоставления, который извлекается из API узла. Так что на самом деле все в порядке, но проблема в том, что эта кнопка не идентифицирует его. Когда я использую простую html-кнопку без какого-либо значка или чего-то еще, она работает нормально.

4. где вы хотите получить это имя? то есть, где вы пытаетесь его использовать? вы должны дать больше контекста, в котором неясно, чего вы хотите достичь на самом деле. где код вашей deletePost функции?

5. имя-это object.id(база данных mongodb) отображаемого элемента. Таким образом, при нажатии на кнопку будет вызвана функция deletePost, которая отправит запрос на публикацию ajax на сервер, передающий идентификатор(имя в кнопке) записи, подлежащей удалению.

Ответ №2:

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

Чтобы создать выделенную кнопку со значком с помощью material-ui, я бы придерживался документации material-ui. Так что что-то вроде:

     <Button
    variant="outlined"
    color="secondary"
    className={classes.button}
    startIcon={<DeleteIcon />}
    >

Где <DeleteIcon/> находится значок, который вам нужно импортировать из библиотеки material-ui.

Метки: ,