问题描述
我有一个 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})
};