Как получить id из другого компонента

146

04 августа 2021, 12:30

Есть код:

class TodoTask extends React.Component {
  render() {
    return (
      <ul>
        {this.props.tasks.forEach((currentValue, index) => {
          <li key={index}>
            {currentValue}
            <button type="submit" id={index} onClick={this.props.click}>Delete</button>
          </li> 
        })}  
      </ul>  
    );
  }
}

Нужно в другом компоненте получить id нажимаемой кнопки, я хочу сделать это в строке:

tasksArray: e.tasksArray.splice(id, 1)

Как правильно получить id наживаемой кнопки из другого компонента?

Answer 1

Можно получить простым способом через событие event, так как аттрибут id уже был заполнен, то не составит особого труда получить его значение. Пример кода:

class App extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      tasks: ['first', 'second', 'third'], 
    }; 
  } 
 
  onButtonClick(event) { 
    console.log('id:', event.currentTarget.id); 
    alert(`Was clicked id: ${event.currentTarget.id}`); 
  } 
 
  render() { 
    const { tasks } = this.state; 
 
    return ( 
      <ul> 
        {tasks.map((currentValue, index) => ( 
          <li key={index}> 
            {currentValue} 
            <button type="submit" id={index} onClick={this.onButtonClick}>Delete</button> 
          </li>  
        ))}   
      </ul>  
  )} 
} 
 
ReactDOM.render( 
  <App />, 
  document.getElementById('container') 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
<div id="container"> 
  <!-- This element's contents will be replaced with your component. --> 
</div>

P.S.: переделал forEach на map, так как использование forEach здесь не уместно.

Event.currentTarget - элемент, в котором в данный момент обрабатывается событие, при движении события внутри DOM. Всегда совпадает с текущим элементом, в отличие от свойства event.target, идентифицируещее элемент, на котором событие возникло.

P.S.: event.currentTarget используется, когда один и тот же обработчик события присваивается нескольким элементам.

Answer 2

Если id определяется с помощью index то и передавайте index в колбэк:

<button type="submit" id={index} onClick={()=>this.props.click(index)}>Delete</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Swiper проблема с изменением slidesPerView

Инициализировал слайдер следующим образом:

226

javascript

Как реализовать такой функционал на JS? [дубликат]

есть стандартный функционалТекст и кнопка читать подробнее

275

javascript

Конструкция fetch в fetch

Есть у меня подобная конструкцияНе понимаю, как сделать так, чтобы после получения информации со второго fetch можно было бы использовать как...

204

CSS

Как оцентрировать значение в slider handle JQueryUI?

Как можно оцентрировать значение, которое отражается в ползунке JQuery UI?

338