Javascript 动态地将按钮添加到div？

好的，这是我的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

var uuid = require("uuid-v4");
// Generate a new UUID
var myUUID = uuid();
// Validate a UUID as proper V4 format
uuid.isUUID(myUUID); // true

var questionNum = 0;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: uuid(),
      title: "",
      author: "",
      questions: [],
      answers: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.addQuestion = this.addQuestion.bind(this);
    this.removeItem = this.removeItem.bind(this)
  }

  componentDidMount() {
    // componentDidMount() is a React lifecycle method
    this.addQuestion();
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  removeItem (index) {
    questionNum--;
    this.setState(({ questions }) => {
      const mQuestions = [ ...questions ]
      mQuestions.splice(index, 1)
      return { questions: mQuestions }
    })
    this.setState(({ answers }) => {
      const mAnswers = [ ...answers]
      mAnswers.splice(index, 4)
      return { answers: mAnswers}
    })
    console.log(
      "answers",
      this.state.answers,
      "questions",
      this.state.questions,
      questionNum,
      this.state.title,
      this.state.author
    );
  }

  addQuestion() {
    questionNum++;
    this.setState(previousState => {
      const questions = [
                          ...previousState.questions,
                          <input 
                            type="text"
                            onChange={this.handleChange}
                            name="question"
                            key={uuid()}
                          />
                        ];
      const answers = [
                        ...previousState.answers,
                      ];

      for (var i = 0; i < 4; i++) {
        answers.push(
          <input 
          type="checkbox" 
          name={uuid()}>
                <input 
                 type="text"
                 onChange={this.handleChange}
                 name={uuid()}
                />
          </input>
        );
      }
      return { questions, answers };
    });
    console.log(
      "answers",
      this.state.answers,
      "questions",
      this.state.questions,
      questionNum,
      this.state.title,
      this.state.author
    );
  }

  render() {
    return (
      <div className="App">
        <div>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Quiz Form 3.0</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>

        <div  className="formDiv">
          <form>
            <div className="Intro">
              Give your Quiz a title:{" "}
              <input
                type="text"
                value={this.state.title}
                onChange={this.handleChange}
                name="title"
              />
              <br />
              Who's the Author?{" "}
              <input
                type="text"
                value={this.state.author}
                onChange={this.handleChange}
                name="author"
              />
              <br />
              <br />
            </div>
            <div className="questions">
            <div className="questions">
              Now let's add some questions... <br />
              <ol>
              {this.state.questions.map(question => {
                return (
                  <li>
                  <div key={uuid()}>
                    Question
                    {question}<br />
                    Answer Choices<br />
                    {Array.from({ length: 4 }, () => (
                      <input type="text" key={uuid()} onChange={this.handleChange} />
                    ))}
                  </div>
                  </li>
                );
              })}
              </ol>
            </div>
              {
              // This is what it would look like for the structure
              // I proposed earlier.
              // this.state.questions.map((question) {
              //   return (
              //       <div>{question.quesion}</div>
              //       {
              //           question.answers.map((answer) => {
              //               return (<div>{answer}</div>);
              //           })
              //       }
              //   );
              // })
              // This would output all questions and answers.
              }
            </div>
          </form>
          <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
          { this.state.questions.map((question, index) => {
          return <button key={uuid()} onClick={ () => this.removeItem(index) }>Remove Question</button>
        }) }
        </div>
      </div>
    );
  }
}

export default App;

好的，现在来看一个演示它现在的功能的快速视频。在视频中，您可以看到每次添加问题时创建的

删除问题

按钮（在表单底部）。我希望每个问题的

Remove question

按钮都在它旁边/在同一个分区中。我不完全确定我将如何执行此操作。有什么想法吗

更新：好，因此我将按钮与实际问题放在同一个div中，但我意识到我正在为数组中的每个对象添加一个按钮。这意味着当一个问题被添加时，一个删除它的按钮被添加到表单上的每个问题中。我需要使它不会

.map

这个。我不完全确定我会为这个做什么其他的功能，也许我甚至不需要一个功能。我会尽我最大的努力解决它。以下是更新后的代码（部分代码）：

现在让我们添加一些问题

{this.state.questions.map（问题=>{
返回(

问题:
{问题}

{
this.state.questions.map（（问题，索引）=>{
返回此.removietem（index）}>删除问题
}) 
}
答案选择

{Array.from（{length:4}，（）=>(
))}

);
})}

类似这样的东西

        <ol>
          {this.state.questions.map((question, index) => {
            return (
              <li>
              <div key={uuid()}>
                Question
                {question}<br />
                <button onClick={ () => this.removeItem(index) }>
                  Remove Question
                </button>
                Answer Choices<br />
                {Array.from({ length: 4 }, () => (
                  <div key={uuid()}>
                    <input type="checkbox" />
                    <input type="text" onChange={this.handleChange} />
                  </div>
                ))}
              </div>
              </li>
            );
          })}
        </ol>

{this.state.questions.map（（问题，索引）=>{
返回(

问题:
{问题}

this.removietem（index）}>
删除问题
答案选择

{Array.from（{length:4}，（）=>(
))}

);
})}

我想一个更直接的问题是，这个按钮是否需要与问题位于同一个div中？是否将

索引

参数与外部

.map

放在一起，然后删除内部

.map

？我想你可能很接近，我就是这么想的，我只是不确定它的语法

        <ol>
          {this.state.questions.map((question, index) => {
            return (
              <li>
              <div key={uuid()}>
                Question
                {question}<br />
                <button onClick={ () => this.removeItem(index) }>
                  Remove Question
                </button>
                Answer Choices<br />
                {Array.from({ length: 4 }, () => (
                  <div key={uuid()}>
                    <input type="checkbox" />
                    <input type="text" onChange={this.handleChange} />
                  </div>
                ))}
              </div>
              </li>
            );
          })}
        </ol>