Javascript 通过React中的按钮添加列表项？

以下是我的代码中有用的部分：

class Answers extends Component {

  constructor(props) {
    super(props);
    this.state = {
      answers: Array(4).fill(""),
      correctAnswers: [],
    };
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  // let event = {
  //   index: 1,
  //   value: 'hello'
  // };
  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var answers = this.state.answers;
    answers[event.index] = event.value;
    this.setState(() => ({
      answers: answers
    }));

    console.log(event);
  }

  render () {
    return (
      <div id="answers">
                Answer Choices<br />
        {this.state.answers.map((value, index) => (
          <Answer value={value} key={index} onUpdate={this.handleUpdate} number={index}/>
        ))}
      </div>
    );
  }
}

class Answer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: "",
      answer: props.value,
      correctAnswers: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState((previousState, props) => ({
      answer: value
    }));
    this.props.onUpdate({
      index: this.props.number,
      value
    });

    //
    // let sample = {
    //   kyle: "toast",
    //   cam: "pine"
    // };

    // sample.kyle
    // sample.cam

  }
  render () {
    return (
      <div>
        <input type="checkbox"/>
        <input type="text" value={this.state.answer} onChange={this.handleChange}/>
      </div>
    )
  }
}


var questionIdx = 0;

class Questions extends Component {
  constructor(props){
    super(props);
    this.state = {
      questions:[]
    }
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var questions = this.state.questions
    questions[event.index] = event.value;
    this.setState(() => ({
      questions: questions
    }));


    console.log(event);
  }

  render () {
    return (
      <div id="questions">
        <ol id="quesitonsList">
          <li id="oneQuestion">
            <Question onUpdate={this.handleUpdate} number={questionIdx}/>
          </li>
        </ol>
      </div>
    );
  }
}

class Question extends Component {
  constructor(props){
    super(props);
    this.state = {
      question: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState((previousState, props) => ({
      question: value
    }));
    //if (this.prop.questions.indexOf(value) == questionIdx) {
      this.props.onUpdate({
        index: questionIdx,
        value
      });
   // }
  }

  render () {
    return (
      <div id="question">
        Question<br />
        <input type="text" value={this.state.question} onChange={this.handleChange}/>
        <PhotoDropZone />
        <Answers />
      </div>
    );
  }
}

class AddQuestionButton extends Component {

  addQuestion () {

  }

  render () {
    return (
      <div id="addQuestionButton">
        <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
      </div>
    );
  }
}

类答案扩展组件{
建造师（道具）{
超级（道具）；
此.state={
答案：数组（4）。填充（“”），
正确答案：[]，
};
this.handleUpdate=this.handleUpdate.bind（this）；
}
//让事件={
//索引：1，
//值：“你好”
// };
handleUpdate（事件）{
//如果（“1”==1）//true
//如果（“1”==1）//false
var answers=this.state.answers；
答案[event.index]=event.value；
此.setState（（）=>({
答案：答案
}));
console.log（事件）；
}
渲染（）{
返回(
答案选择

{this.state.answers.map（（值，索引）=>(
))}
);
}
}
类答案扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入文本：“”，
回答：道具价值，
正确答案：“，
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
this.setState（（以前的状态，道具）=>({
答案：价值
}));
此.props.onUpdate({
索引：this.props.number，
价值
});
//
//让样本={
//凯尔：“敬酒”，
//卡姆：“松树”
// };
//凯尔先生
//sample.cam
}
渲染（）{
返回(
)
}
}
变量IDX=0；
类问题扩展组件{
建造师（道具）{
超级（道具）；
此.state={
问题：[]
}
this.handleUpdate=this.handleUpdate.bind（this）；
}
handleUpdate（事件）{
//如果（“1”==1）//true
//如果（“1”==1）//false
var questions=this.state.questions
问题[event.index]=event.value；
此.setState（（）=>({
问题：问题
}));
console.log（事件）；
}
渲染（）{
返回(


);
}
}
类问题扩展组件{
建造师（道具）{
超级（道具）；
此.state={
问题:"
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
this.setState（（以前的状态，道具）=>({
问题：价值
}));
//if（this.prop.questions.indexOf（value）==questionIdx）{
此.props.onUpdate({
索引：问题IDX，
价值
});
// }
}
渲染（）{
返回(
问题

);
}
}
类AddQuestionButton扩展组件{
添加问题（）{
}
渲染（）{
返回(
添加问题
);
}
}

因此，我很难弄清楚如何使用我的

addQuestionButton

添加

---

到我的

问题在我的
问题
课中列出
。我很难弄清楚如何处理这个问题，我对反应和JS是个新手。我不需要确切的答案，但在正确的方向上的提示会有所帮助。谢谢
 也许它可以帮助您：

const questionsList  = [1, 2, 3, 4, 5];
const listItems = questionsList.map((item, index) =>(
  <li key="{index}">
       <Question onUpdate={this.handleUpdate} number={questionIdx}/>
 </li>
));

ReactDOM.render(
  <ol>{listItems}</ol>
);

const questionsList=[1,2,3,4,5]；
const listItems=questionsList.map（（项目，索引）=>(


));
ReactDOM.render(
{listItems}
);
您可以在
问题中创建一个函数，将问题添加到
问题
状态数组中，并将其作为道具传递给
添加问题按钮
组件

示例


类问题扩展了React.Component{
状态={
问题：[“这是什么？”]
};
addQuestion=question=>{
this.setState（prevState=>({
问题：[…prevState.questions，question]
}));
};
render（）{
返回(
{this.state.questions.map（问题=>(
{question}
))}
);
}
}
类AddQuestionButton扩展了React.Component{
addQuestion=（）=>{
这个.props.onClick(
数学随机
.托斯特林（36）
.子字符串（7）+“？”
);
};
render（）{
返回(
添加问题
);
}
}
render（，document.getElementById（“根”））

这帮了大忙！谢谢你！我有这样的原始想法，但不知道如何去做。这也是很有见地的，但我最终还是按照索勒的方式做了