Блог

Главная - Вопросы по программированию - Как я могу переключить определенное значение в React

Как я могу переключить определенное значение в React

#reactjs

Вопрос:

Я создаю приложение для просмотра фильмов, я показываю каждый фильм в виде карточки с изображением, заголовком и обзором, я создал кнопку для переключения текста обзора с showLess и Showmore, когда я нажимаю на кнопку. Проблема в том, что когда я нажал на ShowMore, чтобы получить остальную часть обзора, это применялось ко всем картам. но чего я хочу, так это когда я нажимаю «Показать больше», я хочу переключить только эту конкретную карту.

Компоненты Карты

 const MovieCard = ({moviesList}) => {
    const [readMore, setReadMore] = useState(false);
    return (
       moviesList.map((singleMovie)=> {
           const {id , title, poster_path, overview} = singleMovie;
            return (
               <article key={id} className="card">
                   <img src={`${ImgPath}`   poster_path} alt={title}/>
                   <h1>{title}</h1>
                   <p>{readMore ? overview :`${overview.substring(0,50)}...`}
                    <button onClick={()=> setReadMore(!readMore)}>
                     {readMore ? "ShowLess" : "ShowMore" }
                    </button>
                   </p>
               </article>
            )
       })
    )
}

export default MovieCard

А ты как думаешь?

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

1. Вы не можете иметь n фильмов и ожидать, что 1 единственное логическое значение будет управлять ими по отдельности.

2. В этом случае все кнопки будут применены с !Подробнее text..so для этого вы должны создать состояние для каждого отдельного фильма

Ответ №1:

Вы можете использовать крючок useRef, в данном случае для прямого доступа к узлу DOM. С помощью useRef вы можете создать изменяемое значение, существующее в течение всего срока службы экземпляра компонента. Затем вы используете yourRef.current для доступа или обновления изменяемого значения. Всем компонентам React можно передать ссылку с помощью реквизита ref, в котором React автоматически назначит экземпляр компонента вашему файлу.current.

Метки: