我目前正在通过一些图标进行映射,这些图标都具有特定的值(图标类型和值通过 Prop 传递)
我的问题是我想要一个点击事件来更新状态以保存来自 onClick 事件的某些键和值/id 等。
这是我的状态:
state = {
activity_id: '',
rating: '',
log: ''
}
这是事件更改处理程序:
changeHandler = e => {
this.setState(
{
activity_id: e.target.id,
rating: e.target.value,
log: e.target.name
},
() => console.log('SUBMITTED:', this.props.user_id, this.state)
)
this.props.addRecord(this.props.user_id, this.state)
}
这里是 onClick 事件发生的地方:
<Grid.Column align="center">
{this.props.smiles.map((smile, key) => {
return (
<a key={key}>
<i
className={
'far ' + `${smile.mood}` + ' fa-3x facesInCss'
}
value={smile.value}
id={this.props.act_id}
name={this.props.name}
onClick={this.changeHandler}
/>
</a>
)
})}
</Grid.Column>
目前,当我点击第二个列表项时,我只会收到这样的信息:
{activity_id: "2", rating: undefined, log: undefined}
我做错了什么?
最佳答案
您可以直接将值传递给您的处理程序,而不是从事件参数中读取。
changeHandler = (e, activity_id, rating, log) => {
this.setState(
{
activity_id: activity_id,
rating: rating,
log: log
},
() => console.log('SUBMITTED:', this.props.user_id, this.state)
)
this.props.addRecord(this.props.user_id, this.state)
}
<Grid.Column align="center">
{this.props.smiles.map((smile, key) => {
return (
<a key={key}>
<i
className={'far ' + `${smile.mood}` + ' fa-3x facesInCss'}
value={smile.value}
id={this.props.act_id}
name={this.props.name}
onClick={(e) => this.changeHandler(e, this.props.act_id, smile.value, this.props.name)}
/>
</a>
)
})}
</Grid.Column>
关于javascript - 您可以从 i 元素 onclick 访问事件数据吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53689080/