更新onChangeText函数中数组哈希的TextInput值

问题描述 投票:3回答:1
  constructor(props) {
   super(props);
    this.state = {
     answers: props.element.answers_data.map((answer, index) => {
     return answer;
    }
  })

     <TextInput
      value = {this.state.answers[index].answer_text}
     onChangeText={(answer_text) => {
              this.setState({
                answers: [
                    ...this.state.answers.slice(0, index),
                    {answer: {answer_text}},
                    ...this.state.answers.slice(index + 1, 
                    this.state.answers.length)
                ]
              });
            }} 
       />

我的答案数据结构就像= 0:{id:799,answer_text:“helloas fast”百分比:0}

我想更新答案文本并将其存储在this.state.answers中,但是当我在textinput上写文本并更新它时,我只得到hash的answer_text,我想要所有id,answer_text,哈希百分比。所以,我需要建议。

提前致谢。

javascript arrays reactjs react-native textinput
1个回答
2
投票

你没有很好地处理你的数组数据。您可以保留其结构,也可以使用answers_data.map将它们转换为字符串。

选项一的完整代码:

constructor(props) {
  super(props);
  this.state = {
    answers: props.element.answers_data.map((answer, index) => {
      return { ...answer };
    })
  }
}

<TextInput
  value = {this.state.answers[index].answer_text}
  onChangeText={(answer_text) => {
          this.setState({
            answers: [
                ...this.state.answers.slice(0, index),
                { ...this.state.answers[index], answer_text },
                ...this.state.answers.slice(index + 1, this.state.answers.length)
            ]
          });
        }} 
 />

备选方案二的完整守则:

constructor(props) {
  super(props);
  this.state = {
    answers: props.element.answers_data.map((answer, index) => {
      return answer.answer_text;
    })
  }
}

<TextInput
  value = {this.state.answers[index]}
  onChangeText={(answer_text) => {
          this.setState({
            answers: [
                ...this.state.answers.slice(0, index),
                answer_text,
                ...this.state.answers.slice(index + 1, this.state.answers.length)
            ]
          });
        }} 
 />
© www.soinside.com 2019 - 2024. All rights reserved.