Как показать блок разборного текста при нажатии кнопки - PullRequest
Новая
       75

Как показать блок разборного текста при нажатии кнопки

0 голосов
/ 26 декабря 2018

Я пытаюсь реализовать разборный компонент.Я разработал его так, чтобы при нажатии кнопки появлялся блок динамического текста.Я сделал функциональный компонент и использовал теги в классе.Имя компонента, CustomAccordion.jsx, и использование этого компонента в Container.jsx

Я попытался создать кнопку и функцию для события onClick.

Часть CustonAccordion.jsx

const handleToggle = () : string =>{
    let content = this.nextElementSibling;

    if (content.style.maxHeight){
        content.style.maxHeight = null;

    }else{
        content.style.maxHeight = content.scrollHeight +'px';
    }
}

export default function CustomAccordion(props: PropType): React.Component<*> {
    const { title, children } = props

    return(
        <div>
        <AccordionButton onClick={() => this.handleToggle()}>{title}</AccordionButton>
        <AccordionContent>
        <p>{children}
        </p>
        </AccordionContent>
        </div>
    )
}

Часть вызова Container.jsx 

<CustomAccordion title = {this.props.name}>
    <p>This is the text passed to component.</p>
</CustomAccordion> 
<br />

Это не показывает расширенный текст, и кажется, что событие щелчка не работает должным образом.Я очень новичок в реакции, думаю, что синтаксис может быть неправильным.

1 Ответ

0 голосов
/ 26 декабря 2018

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

Также вы неправильно получаете доступ к функции handleToggle.Это должно быть onClick={() => handleToggle()}, потому что this в вашем случае - window / null, и поэтому у него нет метода handleToggle.

Вместо этого вы можете использовать компонент класса с сохранением состояния для достижения того же самоговещь. 

export default class CustomAccordion extends React.Component {
  state = {show: false};
  toggle = () => this.setState({show: !this.state.show});
  render() {
    const {title, children} = this.props;
    const {show} = this.state;
    return (
      <div>
        <AccordionButton onClick={this.toggle}>{title}</AccordionButton>
        {show && (
          <AccordionContent>
            <p>{children}</p>
          </AccordionContent>
        )}
      </div>
    )
  }
}

Если вы хотите иметь какую-то анимацию, вы можете установить другое имя_класса на основе состояния show вместо добавления / удаления элементов.

...