Не срабатывает событие onclick?
При нажатии не меняться картинка.
Вот что должно меняться
import React, {useState} from "react" import axios from "axios"; import s from "./user.module.css" import userPhoto from "../../acces/img/png-transparent-computer-icons-user-avatar-avatar-face-heroes-monochrome.png" function Users (props) { debugger const baseURL = "https://social-network.samuraijs.com/api/1.0/users"; const [post, setPost] = React.useState(null); React.useEffect(() => { axios.get(baseURL).then((response) => { setPost(response.data); }); }, []); if (!post) return null; return <> <div> { post.items.map( u => <div key={u.id}> <div className={s.card}> <img className={s.card_img} src={userPhoto} alt="avatar" /> <div className={s.card_text}> <div> <p className={s.card_name}>{u.name}</p> <p>1 общий друг</p> </div> <div> { // МЕСТО С ОТОБРАЖЕНИЕМ КАРТИНОК u.followed ? <button className={s.adduser} onClick={() => {props.unFollowow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/487269/delete-profile.svg" alt="u" /></button> : <button className={s.adduser} onClick={() => {props.follow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/47844/add-friend.svg" alt="f" /></button> } </div> </div> </div> </div>) } </div> </> } export default Users |
import React, {useState} from "react" import axios from "axios"; import s from "./user.module.css" import userPhoto from "../../acces/img/png-transparent-computer-icons-user-avatar-avatar-face-heroes-monochrome.png" function Users (props) { debugger const baseURL = "https://social-network.samuraijs.com/api/1.0/users"; const [post, setPost] = React.useState(null); React.useEffect(() => { axios.get(baseURL).then((response) => { setPost(response.data); }); }, []); if (!post) return null; return <> <div> { post.items.map( u => <div key={u.id}> <div className={s.card}> <img className={s.card_img} src={userPhoto} alt="avatar" /> <div className={s.card_text}> <div> <p className={s.card_name}>{u.name}</p> <p>1 общий друг</p> </div> <div> { // МЕСТО С ОТОБРАЖЕНИЕМ КАРТИНОК u.followed ? <button className={s.adduser} onClick={() => {props.unFollowow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/487269/delete-profile.svg" alt="u" /></button> : <button className={s.adduser} onClick={() => {props.follow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/47844/add-friend.svg" alt="f" /></button> } </div> </div> </div> </div>) } </div> </> } export default Users
Дополнительно:
Выглядит, как проблема в props.follow и props.unFollow.
Можете сделать демку на codesandbox?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Когда событие `onclick` не срабатывает, есть несколько возможных причин, которые следует рассмотреть:
1. Проверьте, что событие `onclick` присутствует в HTML элементе, к которому вы пытаетесь привязать обработчик. Например:
```html
```
2. Убедитесь, что функция, которая должна выполниться при событии `onclick`, определена и доступна в момент выполнения. Например:
```html
function myFunction() {
alert('Событие onclick сработало!');
}
```
3. Проверьте консоль браузера на наличие ошибок JavaScript. Ошибки в других скриптах на странице могут привести к тому, что обработчик `onclick` не будет работать.
4. Проверьте, что обработчик `onclick` не был заблокирован другими скриптами или расширениями браузера. Иногда блокировка скриптов может привести к тому, что события не срабатывают.
Если после проверки данных моментов проблема остаётся, пожалуйста, предоставьте больше информации о коде, который вы используете, чтобы мы могли помочь вам более конкретно.