Блог

Главная - Вопросы по программированию - реагируйте динамически, удаляя пространство

реагируйте динамически, удаляя пространство

#css #reactjs #typescript #dynamic #material-ui

Вопрос:

у меня есть какой-то чип(matarial-ui), который я хочу, чтобы при удалении одного из них динамически удалялось пространство между удаленным чипом и старыми чипами.как я могу это сделать?

                         <div className="row contactsContainer">
                            {contacts.map((contact) => (
                                <div className="col-lg-1 col-md-3 col-sm-4 col-xs-6 my-5">
                                    <Chip
                                    id={contact!.phone}
                                    label="delete"
                                    variant="outlined"
                                    color="primary"
                                    deleteIcon={
                                        <HighlightOffOutlinedIcon id={`del-${contact!.phone}`} />
                                    }
                                    onDelete={handeldelete}
                                    avatar={
                                        <Avatar
                                            alt={`${contact ? contact.phone : ""}`}
                                            src={lady}
                                            className={`li-avatar ${contact ? "" : "d-none"}`}
                                            title={contact?.phone}
                                        />
                                    }
                                    />
                                </div>
                            ))}
                            <div className="col-lg-1 col-md-3 col-sm-4 col-xs-6 my-5 ">
                            {/* <Chip
                                    id="addContact"
                                    label="delete"
                                    avatar={
                                        <Avatar
                                            alt="add contact"
                                            src={add_image}
                                            className={`li-avatar`}
                                            title="افزودن مخاطب جدید"
                                        />
                                    }
                                    /> */}
                                    <div>
                                <a onClick={handleClickOpen}>
                                    <img src={add_image} alt="add_image" className="circel_image" />
                                </a> 
                                </div>
                            </div>
                        </div>

есть какие-нибудь предложения, пожалуйста ?
могу ли я сделать это с помощью пользовательского интерфейса material ? в этом примере я использую bootstrap

Ответ №1:

Я думаю, это должно сработать. Можете ли вы поделиться кодом функции, которую вы использовали для удаления чипа? Я считаю, что при удалении элемента должно быть удалено пространство. Может быть, вы сможете лучше объяснить свою проблему?

Вот пример в material-ui для удаления чипов из массива чипов.

Удалить фишки пример песочницы

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

1. ` const handeldelete = (реквизит: любой) => { console.log(props.target.id); console.log(props.target.id.slice(4)); элемент const = document.getElementById(props.target.id.slice(4))! как HTMLDivElement; элемент.удалить(); }`

2. Вы можете использовать vanilla JS, но вместо этого рекомендуется использовать вместо этого прямое управление по идентификатору. В вашем конкретном случае я бы рекомендовал проверить песочницу, которую я опубликовал.

3. PS это действительно удаляет пространство, потому что, удаляя внутренний div с идентификатором, вы не удаляете внешний div с классом «md-3». который все равно занял бы место из 3 секций. Если вы действительно хотите выполнить свой процесс, я рекомендую добавить часть идентификатора в самый внешний div в цикле

4. спасибо, друг, я решил свою проблему, обновив состояние и перезагрузив его после удаления и его работы

Метки: ,