1.Как у меня может быть только одна html структура, которая будет отображаться для трех категорий?
Вы можете сохранить свои три категории в трех константах let, например:
render() {
let theFirstItem = <div> Your 1 st content here </div>
let theSecondItems = <div> Your 2 nd content here </div>
let theThirdItems = <div> Your 3 rd content here </div>
return(
<div>
<div>{theFirstItem}</div>
<div>{theSecondItem}</div>
<div>{theThirdItem}</div>
</div>
)
}
2.Если пользователь нажимает кнопку «плюс», то как мне добавить эту точную строку после первой с изменением идентификаторов?
Пример кода:
import React, {
Component
} from "react";
class details extends Component {
constructor() {
super();
this.state = {
rows: []
};
this.addRow = this.addRow.bind(this);
}
componentDidMount() {
let r1 = <div> Your template code here </div>;
var rows = this.state.rows;
rows.push(r1);
this.setState({
rows: rows
});
}
addRow() {
var rows = this.state.rows;
let rPlus = <div> Added row here </div>;
rows.push(rPlus);
this.setState({
rows: rows
});
}
render() {
return (
<div>
<div>
{this.state.rows.map(row => (
<tr>
<td>{row}</td>
</tr>
))}
</div>
<div>
<button onClick={this.addRow}>Your Plus Button</button>
</div>
</div>
);
}
}
export default details;
3.Как получить значение каждой добавленной новой строки вместе с предыдущей?
Учитывая, что вы не указали, когда хотитечтобы получить значение каждой добавленной строки, я предполагаю, что вы хотите сохранить ввод пользователя, когда он нажимает кнопку «плюс».Если это так, вам нужно либо создать форму, либо обработать значение, добавив функцию onClick для отправки всех значений строки.Я предлагаю вам сохранить все значения текущей строки редактирования в этом значении this.state, а затем, как только пользователь отправит их, вы можете сохранить их в избыточном состоянии или напрямую сохранить в вашей базе данных.
Например:
constructor() {
super();
this.state = {
value: ""
};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
});
//do not forget this, or user cannot modify the value.
}
И в HTML, если вы используете ввод:
<input
name="searchContent"
value={this.state.yourValue}
onChange={this.onChange}
/>
Затем добавьте функцию onClick, чтобы сохранить текущее значение this.state во что угодно.
4. Если пользователь удалил эту строкутогда как мне удалить это?
Вы должны сохранить индексы строк при сохранении всех значений строки.И используйте:
array.splice(index, 1);
, чтобы удалить строку из массива "lines", который я указал для Q2.
5.Где добавить полосу прокрутки, поскольку может быть добавлено максимум 20 строк?
Пример HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px olivedrab;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: yellowgreen;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background: #7bac10;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Your rows here.
Your rows here.
Your rows here.
...
</div>
</body>
</html>
На этой странице можно найти другие стили: Полоса прокрутки
Надеюсь, мой ответ поможет вам.