React Material UI 在点击时获取列表项详细信息

Question

我已经从 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>

Answer 1

您的错误是您正在发送单击 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>