Пользовательский интерфейс React Material получает сведения об элементе списка по щелчку

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я заполнил список из ответа 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>

1. Итак, я вижу, что вы передаете выбранное item handleRowSelected . Что вы пробовали оттуда? Я думаю, вам нужно предоставить больше кода, поскольку я не вижу, где вы используете this.state.selectedItem значение или какой-либо компонент редактирования.

Ответ №1:

Ваша ошибка заключается в том, что вы отправляете то, что возвращается при нажатии на элемент списка, не потому, что вы даете ему то же имя, оно будет иметь то же значение. вы должны сделать это так.

 {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>