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

Question

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

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

Answer 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])
}

Answer 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})
};