React почему при вызове bind функция работает, а при стрелочной функции нет?

Question

начал изучать React и пишу ToDoList. В процессе работы столкнулся со следующей проблемой: Если основной класс App, он должен передать функцию в компонент AppPanelItem, который является дочерним AppPanel. При клике на span в AppPanelItem в консоли должно вывестись 'done'

export default class App extends Component {
state = {
    listData: [
        {label: 'Monkey и 1', important: false, done: false ,id: 1},
        {label: 'Duck и 2', important: false, done: false , id: 2},
        {label: 'Moisey и 3', important: false, done: false , id: 3},
        {label: 'Igor и 4', important: false, done: false , id: 4}
    ]
};

render() {
    
    return (
        <div className="todo-app">
                <AppHeader  toDo={1} done={3}/>
            <div className='search-panel'>
                <div  className="top-panel d-flex">
                    <SearchPanel/>
                    <ItemFilter/>
                </div>
            </div>
            
            <AppPanel list={this.state.listData}
            onLabelCkick = {() => console.log('done')}/>
        </div>
    );
};
const AppPanel = ({list, onLabelCkick}) => {
const element = list.map((item) => {
    const {id, important, done, ...items} = item;
    return (
        <li className="list-group-item"
            key={id}>
            <AppPanelItem {...items} 
            onLabelCkick={() => onLabelCkick}/></li>
    )
  });
return (
    <ul className="list-group todo-list">
        {element}
    </ul>
);

};

export default class AppPanelItem extends Component {



constructor() {
    super()
    this.state = {
      done: false,
      important: false
    }
  }





 render() {
      const {label, onLabelCkick, done, important} = this.props;
  let classNames = 'todo-list-item';

  if (done) {
    classNames += ' done';
  }

  if (important) {
    classNames += ' important';
  }
  
    return (
      <span className={classNames}>
      <span
        className="todo-list-item-label"
        onClick={onLabelCkick}>
          {label}
      </span>

      <button type="button"
              className="btn btn-outline-success btn-sm float-right">
        <i className="fa fa-exclamation" />
      </button>

      <button type="button"
              className="btn btn-outline-danger btn-sm float-right">
        <i className="fa fa-trash-o" />
      </button>
    </span>
  );
};

};

Если вызвать стрелочную функцию, то в консоли ничего не выводится, но замена на bind (onLabelCkick={onLabelCkick.bind(this) })решает все проблемы. Почему так работает?

Answer 1

Возможно, проблема в том, что ты не вызываешь onLabelCkick, обернув его в стрелочный callback. То есть, в случае с bind ты, условно, передаешь тело функции, к которой потом дописывается (), а при вызове стрелочной в теле нет вызова, просто тело функции onLabelCkick без вызова. Попробуй заменить: onLabelCkick={() => onLabelCkick()}

БЛОГ НА HUSL

React почему при вызове bind функция работает, а при стрелочной функции нет?

Ответы (1 шт):