Блог

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

     <List>
         {filesList ? (
           filesList.map((item, index) => (
            <ListItem key={index} button onClick={this.setCurrentUrl(index)}>
               <ListItemIcon>
                   <InsertDriveFile/>
               </ListItemIcon>
               <ListItemText primary={item.name} />
            </ListItem>
        ))
    ) : (
            <ListItem>There are no attachement files</ListItem>)}
            <ListItem/>
      </List>
  

метод setCurrentUrl :

 setCurrentUrl(index) {
        console.log(index);
    }
  

я буду выводить все элементы в консоль при загрузке моей страницы. Почему? Но если я сделаю что-то вроде этого:

 <ListItem key={index} button onClick={this.setCurrentUrl} value={index}>
  

и

 setCurrentUrl(event) {
        console.log(event);
    }
  

тогда console.log(event); будет вызываться только тогда, когда я нажимаю на элемент в списке. Но таким образом я не знаю, как отправлять параметры в setCurrentUrl

Способ, которым вы используете

  <ListItem key={index} button onClick={this.setCurrentUrl(index)}>
  

это проблематично, поскольку функция setCurrentUrl будет вызвана, как только компонент будет отрисован. Чтобы вызвать функцию только при срабатывании события onClick, вам необходимо использовать обратные вызовы.

 <ListItem key={index} button onClick={() => this.setCurrentUrl(index)}>
  

Использование обратного вызова не вызовет функцию во время визуализации компонента и вызовет функцию только при срабатывании события onClick.

Причина, по которой это происходит, заключается в том, что вы вызываете функцию. Функция будет выполнена сразу после визуализации компонента.

  <ListItem key={index} button onClick={this.setCurrentUrl(index)}>
  

Вместо этого вам следовало бы сделать

 <ListItem key={index} button onClick={() => this.setCurrentUrl(index)}>
  

Что это сделает, так это назначит функцию обработчику onClick и будет вызываться только при нажатии кнопки.