当我多次单击“添加”按钮时，它应该显示“我在这里”，并带有“删除”按钮多次

Question

• 我正在尝试构建一个简单的用户界面，以便我可以学习反应。
• 现在，当我单击添加按钮时，它将显示我在这里div和删除按钮
• 当我多次单击添加按钮时，它应该显示我在div中具有删除按钮多次。
• 所以我研究发现了这个例子https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html
• 使用此示例，我实现了appendData方法，但仍然没有多次添加div。
• 在我的控制台中，我能够看到div被添加了多少次console.log("this.displayData---->", this.displayData);
• 你能告诉我如何解决它。
• 以便将来我自己修复

https://stackblitz.com/edit/react-b2d3rb?file=demo.js

 onClick = () => {
    this.setState({ showResults: true });
    this.setState({ showOrHideSearch: true });
    this.displayData.push(
      <div style={{ display: this.state.showOrHideSearch ? "" : "none" }}>
        {" "}
        I am here
        <input
          ref="rbc-toolbar-label"
          type="submit"
          value="Delete"
          onClick={this.onDelete}
        />
      </div>
    );

    console.log("this.displayData---->", this.displayData);

    this.setState({ showdata: this.displayData });
  };

Answer 1

第一件事是您不应多次使用this.setState，而应该一行使用它们。 而不是将数据推送到类变量中，您应该将该数据设置为状态变量以及应在渲染函数中使用的相同变量。 如果您可以共享完整的代码，那就太好了。

Answer 2

import React, { Component } from 'react';
import Calendar from 'rc-calendar';
import DatePicker from 'rc-calendar/lib/Picker';
import 'rc-calendar/assets/index.css';
import moment from 'moment';

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    console.log("AsyncValidationForm  this.props---->", this.props);

    this.state = {
      displayData: []
    };
  }

  onClick = () => {
    let displayData = [...this.state.displayData];

    displayData.push( { text: 'I am here' });
    this.setState({ displayData: displayData });
  };

  onDelete = index => {
    let displayData = [...this.state.displayData];
    if(index > -1){
      displayData.splice(index, 1);
    }
    this.setState({ displayData: displayData });
  };

  handleChange = name => event => {
    const value = event.target.value;
    this.setState(
      {
        [name]: value,
        pristine: false
      },
      () => {
        this.props.handleChange(name, value); //setState username, password of VerticalLinearStepper.js
      }
    );
  };

   onSubmit(event) {
    event.preventDefault();
    var newItemValue = this.refs.itemName.value;

    if(newItemValue) {
      this.props.addItem({newItemValue});
      this.refs.form.reset();
    }
  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    let { displayData} = this.state;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <input type="submit" value="add" onClick={this.onClick} />
          {displayData.length  > 0 ? displayData.map(function(data, index) {
            return (
            <div key={index}>
              {data.text} - For testing added index on screen {index}
              <input
                ref="rbc-toolbar-label"
                type="submit"
                value="Delete"
                onClick={() => this.onDelete(index)}
              />
            </div>
          )}, this) : null}
        </div>
      </form>
    );
  }
}

export default CalendarPage;