Блог

Главная - Вопросы по программированию - Событие OnClick в компоненте Link

Событие OnClick в компоненте Link

#reactjs

#reactjs

Вопрос:

У меня есть страница с несколькими NavLink s, мне нужно установить родительское состояние с именем щелчка NavLink , как я могу это сделать, если NavLink у s нет события OnClick?

Я бы хотел сделать что-то подобное:

 <Tile to="./request" department={item.catName} key={item.id} 
      onClick={() => this.setState(catId: item.id)} />

Но onClick , похоже, он не запускается.

 export default class extends Component {
  state = {
  };

  componentDidMount() {
    this.props.handleChange(this.state);
  }

  componentDidUpdate(_, prevState) {
     if (this.state !== prevState) {
        this.props.handleChange(this.state);
     }
  }

  render() {
    const { categoriesWithSub } = this.props.categoriesWithSub;
    return (
        {categoriesWithSub amp;amp;
          categoriesWithSub.map(item => (
            <Tile
              to="./request"
              department={item.catName}
              key={item.id}
            />
          ))}
      </div>
    );
  }
}

export function Tile({ to, department, onClick }) {
  return (
    <NavLink to={to} css={tile} onClick={onClick}>
      {department}
    </NavLink>
  );
}

Комментарии:

1. onClick на NavLink компоненте должно работать. Вы взяли onClick prop в Tile компоненте и добавили его в NavLink ?

2. то, как вы определяете onClick, частично верно, onClick станет частью объекта props. Вам нужно использовать его для NavLink в компоненте Tile.

3. @Tholle Да, я делаю, но он не достигает componentDidUpdate метода, поэтому не похоже, что он устанавливает состояние onClick

4. @user3378165 Хорошо. Я не совсем уверен, что вы имеете в виду componentDidMount в данном случае, поскольку это будет вызываться только при первом создании компонента. Для этого может потребоваться отдельный метод обработки щелчков.

5. @Tholle Извините, я имел в виду componentDidUpdate . Если состояние изменяется, оно должно вызывать componentDidUpdate метод, не так ли?

Ответ №1:

Для Navlink требуется onClick, который был передан из вашей пользовательской плитки компонента

измените функцию экспорта на 

 export function Tile({ to, department, onClick }) {
  return (
    <NavLink to={to} css={tile} onClick={onClick}>
      {department}
    </NavLink>
  );
}

Комментарии:

1. если это помогло, не забудьте отметить его как ответ. приветствия👍🏽