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.low
2.medium
3.硬

对于每个字段，将有一个相同的HTML结构。

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

因此，中型和硬型也是如此。我有几个问题，例如：

1。我怎么只有一个可以为三个类别呈现的html结构？

如果用户单击加号按钮，那么我如何在第一个具有ID更改的行之后添加确切的行？
如何获取与上一行相同的每个新添加行的值？
如果用户删除了该行，那我该如何删除呢？
在哪里添加滚动条，因为最多可能添加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

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

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

1 个答案: