#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. Это потрясающе!