Блог

Главная - Вопросы по программированию - Как отобразить кнопку только в последнем элементе списка?

Как отобразить кнопку только в последнем элементе списка?

#javascript #reactjs

Вопрос:

Я все еще новичок в ReactJS.

У меня есть список, в который я могу добавить новые строки. Чтобы добавить строку, я использую кнопку «плюс», а чтобы удалить строку, я использую кнопку «минус».

Я хотел бы знать, как я могу показать кнопку «Плюс» только на последнем элементе в моем списке? Чтобы кнопка «плюс» не повторялась без необходимости.

Не могли бы вы сказать мне, как я могу удалить эти ненужные кнопки «плюс»? Заранее спасибо.

Вот мой код, который я поместил в codesandbox.

 import React from "react";

import "./styles.css";

import List from "./List/List";

const App = () => {
  const [data, setData] = React.useState([
    [
      {
        label: "Name",
        value: "",
        name: "00"
      },
      {
        label: "Last Name",
        value: "",
        name: "01"
      }
    ]
  ]);

  const handleOnChange = (e, row, col) => {
    const newData = data.map((d, i) => {
      if (i === row) {
        d[col].value = e.target.value;
      }

      return d;
    });
    setData(newData);
  };

  const addRow = () => {
    console.log(data);
    setData([
      ...data,
      [
        {
          label: "Name",
          value: "",
          name: `${data.length}0`
        },
        {
          label: "Last Name",
          value: "",
          name: `${data.length}1`
        }
      ]
    ]);
  };

  const removeRow = (index) => {
    const _data = [...data];
    _data.splice(index, 1);
    setData(_data);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <List
        data={data}
        addRow={addRow}
        removeRow={removeRow}
        handleOnChange={handleOnChange}
      />
    </div>
  );
};

export default App; 
 import React from "react";

import AddCircleIcon from "@material-ui/icons/AddCircle";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import TextField from "@material-ui/core/TextField";

import "./styles.scss";

const List = ({ data, handleOnChange, addRow, removeRow }) => {
  return (
    <div className="container">
      {data.map((items, i1) => (
        <div key={i1} className="content">
          <div className="content-row">
            {items.map((item, i2) => (
              <TextField
                key={i2}
                label={item.label}
                value={item.value}
                onChange={(e) => handleOnChange(e, i1, i2)}
                variant="outlined"
                name={item.name}
              />
            ))}
          </div>
          <div>
            <AddCircleIcon onClick={addRow} />
            {data.length > 1 amp;amp; (
              <RemoveCircleIcon onClick={() => removeRow(i1)} />
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default List;

введите описание изображения здесь

Ответ №1:

Вам нужно будет добавить условие при отображении кнопки «Плюс»:

Итак, в вашем List компоненте:

Замените это:

 <AddCircleIcon onClick={addRow} />

Для

 {i1 === data.length - 1 amp;amp; <AddCircleIcon onClick={addRow} />}

Рабочий пример

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

1. Это потрясающе!

Метки: