使用 react-redux 在单击按钮时添加新的精确元素

Question

我是 react-redux. 的新手所以，我有以下标记

<div className="questionLevelIndication">
                    <span className="levelIndicatorBtn backgroundColorForLow">
                        1
                    </span>
                    <label className="levelIndicationLabel">
                        Low Maximum 6
                    </label>
                </div>
                <div className="row topMargn">
                    <div className="questionRow">
                        <div className="rowContent borderRight text-center ">1</div>
                        <div className="rowContent fontStyle borderRight">
                            <label type="text">Select from </label>
                            <select value="" className="selectpicker btn btn-labeled btn-start selectId techDrop  margin-left-10">
                                <option value="">None Selected</option>
                                <option value="">Abc </option>
                                <option value="">PQR </option>
                            </select>
                        </div>
                        <div className="rowContent borderRight">
                            <div className="fontStyle">
                                <span>Select Questions Type</span>
                                <button type="button" className="btn btn-primary btn-sm margin-left-10 typeBtn">some Type</button>
                                <button type="button" className="btn btn-secondary btn-sm margin-left-10 typeBtn">Nothing Type</button>
                            </div>
                        </div>
                        <div className="rowContent">
                            <div className="fontStyle">
                                Number Of Questions
                                <select value="" className="numberDropdown selectpicker btn btn-labeled btn-start selectId quesSDrop margin-left-10">
                                    <option value="">01</option>
                                    <option value="">02</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div className="rowContent">
                        <span className="">
                            <button type="button" className="btn btn-outline-primary btn-sm standard-btn-50">Reset</button>
                        </span>
                        <span>
                            <button type="button" className="btn btn-primary btn-sm standard-btn-50 margin-left-10">+</button>
                        </span>
                    </div>
                </div>

这里是三种类型的字段：

1.低
2.中等
3.硬

对于每个字段，都会有相同的 HTML 结构。

所以，我三次使用了相同的代码。每个类别中都有一个加号按钮，现在，单击此按钮后，尊重的行将为第一个用户复制一次，最多 6 行。

因此，中等难度和难度也是如此。我有几个问题，例如：

1.我怎样才能只有一个html结构可以呈现三个类别？

1. 如果用户点击加号按钮，那么如何在更改 ID 的第一行之后添加该行？

2. 如何获取每个添加的新行的值以及前一行的值？

3. 如果用户已删除该行，那么我该如何删除该行？

4. 我应该在哪里添加滚动条，因为最多可以添加 20 行？

谁能给我任何提示？会很有帮助的。

Answer 1

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.如果用户点击加号按钮，那么如何在第一个更改 ID 的行之后添加该行？

示例代码：

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 值，然后一旦用户提交它们，你可以将它们保存到 redux 状态或直接保存在你的数据库中。

例如：

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);

从我为 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>

您可以从此页面找到其他样式： Scroll Bar

希望我的回答对你有所帮助。