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

如何解决如何从 React JS 中的重复元素中获取价值

我有一个 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
    })
};

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

解决方法

您可以将索引作为 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])
}

,

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

传递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})
};