Пользовательские Подробнее в React.js
Как вы можете видеть на этом изображении, «+ Las mor» - это кнопка «увидеть больше», при нажатии на которую растягивается весь абзац, написанный выше. Мне нужен код React, чтобы это работало. Любая помощь будет оценена по достоинству. Я также прилагаю код, к которому будет применяться эта функциональность.
<section id = "section-2">
<h4>Om mig</h4>
<p className = "para">
{about}
</p>
</section>
<p style = {{color:'#d39176'}}>
<img src = {plus1} />
Läs mer
</p>
Ответы 1
Вероятно, вам нужна кнопка, которая переключает состояние развернутого текста onClick. При нажатии кнопки вы устанавливаете состояние, противоположное тому, что было. Вот рабочий пример, который я написал с помощью React и Reactstrap. Я только что локально тестировал. Вот видео-демонстрация того, что вы увидите: https://screencast.com/t/in5clDiyEcUs
import React, { Component } from 'react'
import { Container, Button } from 'reactstrap'
class App extends Component {
constructor(props) {
super(props)
this.state = {
expanded: false //begin with box closed
}
}
//function that takes in expanded and makes it the opposite of what it currently is
showButton = () => {
this.setState({ expanded: !this.state.expanded })
}
render() {
const { expanded } = this.state
return (
<Container style = { { justifyContent: 'center', alignItems: 'center' } }>
<div>Always visable text.</div>
<Button onClick = { this.showButton }>Expand</Button>
{
expanded && //show if expanded is true
<div>Extended Text Here</div>
}
</Container>
)
}
}
export default App
Это хороший ответ. По сути, она говорит о том, что вам нужно, чтобы в вашем состоянии был bool, который переключается на противоположное значение при нажатии кнопки «увидеть больше». В вашем JSX вы должны отображать дополнительный текст с помощью <div> (или чего-то еще) и использовать bool в своем состоянии для управления его видимостью.
Я просто обновил его, чтобы он стал рабочим примером. Также есть видео, как это работает.