如何在React中将状态内的对象的值设置为HTML输入值？

Question

我有一个带有以下组件的React应用。在此组件内，我有一个对象状态，在这些对象内，存储了一些要设置为HTML输入值的值。 问题是，当我将这些值设置为HTML输入的状态值时，它将不适用。 HTML输入为空。我可以通过将这些值分配给变量来将这些值设置为值引用，但是之后我无法使用onChange函数来更改值。我该如何解决？

state.questionsData = [{
   order: 1,
   question: "Question 1",
   questionType: "scq",
   scq: [
      { optionId: 1, optionName: "op1" },
      { optionId: 2, optionName: "op2" },
   ]}
]

以下内容无效。 HTML输入值将为空

addOptionToState = (id, optionId) => {
   var newOption = <input
                    type="text"
                    value={
                          this.state.questionsData.forEach(element => {
                              if (element.order === id) {
                                 element.scq.forEach(each => {
                                    if (each.optionId === optionId) {
                                          // this console shows the value, but return doesn't work
                                          console.log(each.optionName)
                                          return each.optionName
                                    }
                                 })
                              }
                          })
                    }
                    onChange={e => this.handleQuestionOptions(e, id)}
                   />
}

以下内容有效。但是我无法编辑值，因为该值不再是状态值

addOptionToState = (id, optionId) => {

   var stateValue = "";

   this.state.questionsData.forEach(element => {
      if (element.order === id) {
         element.scq.forEach(each => {
            if (each.optionId === optionId) {
               stateValue = each.optionName
            }
         })
      }
   })

   var newOption = <input
                    type="text"
                    value={ stateValue }
                    onChange={e => this.handleQuestionOptions(e, id)}
                   />
}

我该如何解决？