reactjs - React Material UI 在点击时获取列表项详细信息
问题描述
我已经从 API 响应中填充了列表。我有一个编辑组件来更新列表项值。单击列表项时我需要列表项值并将其作为道具传递给编辑组件。下面是我的代码。
class Appointments extends Component {
constructor()
{
super();
this.state = {
CurrentAppointments: [],
isModalOpen: false,
selectedLead:
{ leadid: '', acountname: '', status:'', category:'',
appointment:
[
{
aptid: '',
aptdate:'',
status: ''
}
]
}
}
this.handleModelOpen =this.handleModelOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleRowSelected = this.handleRowSelected.bind(this);
}
componentDidMount() {
api.get().then(json => this.setState({ CurrentAppointments: json }));
}
handleModelOpen() {
this.setState({isModalOpen: true})
}
handleClose() {
this.setState({ isModalOpen: false});
}
**handleRowSelected(item) {
//this.setState({ selectedLead: item });
console.log("Item"+ this.state.selectedLead)
//this.setState({ isModalOpen: true });
}**
下面是渲染
<List>
{this.state.CurrentAppointments.map(item => (
<div key = {item.leadid}>
<ListItem button
className={classes.listItem}
selectedLead = {item}
onClick= {(item)=>this.handleRowSelected(item)}>
<div>
解决方案
您的错误是您发送的是单击 ListItem 时返回的内容,而不是因为您给它提供了相同的名称,它将具有相同的值。你必须这样做。
{this.state.CurrentAppointments.map(item => (
<div key = {item.leadid}>
<ListItem button
className={classes.listItem}
selectedLead = {item}
onClick= {(event)=>this.handleRowSelected(item)} // event is the value to click and item is the value the map
>
<div>
推荐阅读
- python - 如何使用 boto3 从特定对象开始循环遍历 s3 存储桶?
- python - Python Open file not creating new file
- jestjs - Eslint jest/globals 环境密钥未知
- jquery - 限制用户在使用 wordpress 媒体编辑器选择特色图像时裁剪图像
- .net - 如何制作拆箱设置器表达式?
- hyperledger-fabric - 如何更正 Hyperledger Explorer 的数据库访问错误?
- android - bottomSheetDialogFragment 全屏
- asp.net-mvc - URL 路径为空时的 MVC 路由
- javascript - 如何将日期格式从python中的视图传递到