Как сделать по нажатию на кнопку добавление и удаление рядов?

Question

Как сделать так что когда я нажимаю на кнопку добавить ряд по вертикали он добавлял ряд по вертикали и так же его мог удалять? То что то вообще не догоняю как это реализовать...

function Wrapper(){

    const style_wrapper = {
        display:'grid',
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
        margin: '0 auto',
        gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
    }

    const style__item_wrapper = {
        position:'relative',
        width: '150px',
        height: '150px',
        margin:'5px'
    }

    function addVertically() {}
    function removeVertically() {}
    function addHorizontals() {}
    function removeHorizontals() {}

    return (
        <> 
            <div id="priem">
                <div className="container__wrapper" style={style_wrapper}>
                    <img className="item_wrapper" id="item1" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item2" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item3" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item4" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item5" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item6" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item7" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item8" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item9" style={style__item_wrapper}  src="" alt=""/>
                    <img className="item_wrapper" id="item10" style={style__item_wrapper} src="" alt=""/>
                    <img className="item_wrapper" id="item11" style={style__item_wrapper} src="" alt=""/>
                    <img className="item_wrapper" id="item12" style={style__item_wrapper} src="" alt=""/>
                    <img className="item_wrapper" id="item13" style={style__item_wrapper} src="" alt=""/>
                    <img className="item_wrapper" id="item14" style={style__item_wrapper} src="" alt=""/>
                    <img className="item_wrapper" id="item15" style={style__item_wrapper} src="" alt=""/>
                </div>
            </div>
            <button onClick={addVertically}>Добавить ряд по вертикале</button>
            <button onClick={removeVertically}>Удалить ряд по вертикале</button>
            <button onClick={addHorizontals}>Добавить ряд по горизонтали</button>
            <button onClick={removeHorizontals}>Удалить ряд по горизонтали</button>
        </>
    );
};

export default Wrapper;

Answer 1

Реализуем добавление строк и столбцов по нажатию кнопки

Нам поможет в этом двумерный массив.

Для удобства взял за основу для визуализации обычную таблицу. В качестве значений, обычные числа(Создан счетчик).

export function Wrapper() {
    const [i,iSet] = useState(0);
    const [lines, setLines] = useState([[convertJSX(0)]]);

    function convertJSX(elem) {
        return (
            <div className={`item_wrapper itemNum${elem}`} id={elem}>
                Это номер <span id={`sp${elem}`}>{elem}</span>
            </div>
        )
    }

    function addVertically() {
        let j = i;
        const lineNew = lines.map(col => {
            col.push(convertJSX(++j));
            return col;
        })
        iSet(j);
        setLines(lineNew);
    }
    function removeVertically() {
        const lineNew = lines.map(col => {
            col.pop();
            return col;
        })
        setLines(lineNew);
    }
    function addHorizontals() {
        let j = i;
        const line = lines[0].map(i => convertJSX(++j));
        iSet(j);
        const linesNew = [ ...lines];
        linesNew.push(line);
        setLines(linesNew);
    }
    function removeHorizontals() {
        const linesNew = [ ...lines];
        linesNew.pop();
        setLines(linesNew);
    }

    return (
        <>
            <table>
                {lines.map((line) => (
                    <tr>
                        {line.map(col => (
                            <td>{col}</td>
                        ))}
                    </tr>
                ) )}
            </table>
            <br />
            <button onClick={addVertically}>Добавить ряд по вертикале</button>
            <button onClick={removeVertically}>Удалить ряд по вертикале</button>
            <br />
            <button onClick={addHorizontals}>Добавить ряд по горизонтали</button>
            <button onClick={removeHorizontals}>Удалить ряд по горизонтали</button>
        </>
    );
}

Стили под пример

.itemNum1 { background-color: #0a53be }
.itemNum2 { background-color: #0c4128 }
.itemNum3 { background-color: #2c3034 }
.itemNum4 { background-color: #3dd5f3 }
.itemNum5 { background-color: #6a1a21 }
.itemNum6 { background-color: #61dafb }
.itemNum7 { background-color: #523e02 }
.itemNum8 { background-color: #13653f }
.itemNum9 { background-color: #86b7fe }
.itemNum10 { background-color: #b02a37 }

БЛОГ НА HUSL

Как сделать по нажатию на кнопку добавление и удаление рядов?

Ответы (1 шт):

Реализуем добавление строк и столбцов по нажатию кнопки