React 保存当前状态的值并使其不可更改

Question

我是 React 的新手，我在考虑保存当前状态的值时遇到问题。我不确定这是否可能。

总而言之，我构建了一个返回 HTML 元素的函数，如下所示。这个想法是在每次点击时保存一个div。

createQuestion(){
        let CurrentQuestion=this.state.freetextinput;
        return this.state.values.map((el, i) => 
         <div key={i} className="QuestionBox">
            {CurrentQuestion}
         </div>          
        )
    }

自由文本输入的值在每次单击时都会更改。这个想法是保存自由文本输入的所有值。假设，自由文本输入的值是 1、2、3。我想拥有所有三个值：

1
2
3

但是，我只得到这样的东西：

3
3
3

我想知道，是否有办法保存/存储 this.state.freetextinput 的值，这样我就可以获得所有三个值。

Answer 1

新问题需要先推送到数组中，然后才能映射。这样的东西对你有用吗？

var savedQuestions = []
createQuestion(q){        
  savedQuestions.push(q)
  this.setState({savedQuestions: savedQuestions}, () => {
    var questionElements = this.state.savedQuestions.map((el, i) => 
     <div key={i} className="QuestionBox">
        {el}
     </div>          
    )
    })
    return questionElements
}

Answer 2

将自由文本输入的每个输入保存到数组中，这样您就可以访问所有值：

您可以检查此代码沙箱：https://codesandbox.io/s/j835121kv

Answer 3

你应该直接映射this.state.freetextinput：

由于freetextinput是一个字符串，您需要先使用 split 将其转换为数组

createQuestion(){
    return this.state.freetextinput.split(', ').map(el =>
        <div key={el} className="QuestionBox">
            {el}
        </div>
    )
}

如果您的字符串看起来像："1, 2, 3"，这将起作用如果您的字符串"123"则使用 split('') 而不是 split(', ')