如何从 React JS 中的重复元素中获取价值答案

【问题标题】：How to get value from repeating elements in React JS如何从 React JS 中的重复元素中获取价值
【发布时间】：2021-02-01 11:41:03
【问题描述】：

我有一个 map 函数，它根据一些看起来像这样的对象呈现 textarea：

<div>
   {this.state.number.map((item, key) => {
       return (
          <div key={key}>
              <textarea
                  key={key}
                  name='value'
                  onChange={this.handleChange}
               />
           </div>
           )
         })}
</div>

我的问题是如何从每个文本区域中检索数据？

handleChange = event => {
    this.setState({
        [event.target.name]: event.target.value
    })
};

希望有人能指出我正确的方向

【问题讨论】：

this.state.number 数组中存储了什么？这些物体长什么样？
空对象，所以它看起来像这样： Array [ { }, { }, { } ] 对象的数量会随着给定的数量而变化

标签： reactjs dictionary element repeat

【解决方案1】：

您可以将索引作为 id 分配给映射中的每个文本区域

{this.state.number.map((item, key) => {
       return (
          <div key={key}>
              <textarea
                  key={key}
                  name='value'
                  id={key}
                  onChange={this.handleChange}
               />
           </div>
           )
         })}

并通过索引获取价值

const handleChange = (event) => {
    let index = event.target.id;
    console.log(this.state.number[index])
}

【讨论】：

【解决方案2】：

我想通了，所以这是我为可能面临同样问题的任何人提供的解决方案：

为handleChange方法传递索引

<div>
   {this.state.number.map((item, index) => {
      return (
        <div key={index}>
           <textarea       
              value={item.statement}
              onChange={(e)=>this.handleChange(e, index)}
            />
         </div>
         )
        })}
  </div>

然后像这样使用它：

handleChange = (event, index) => {
    this.state.number[index] = event.target.value
    this.setState({ number : this.state.number})
};

【讨论】：