尝试通过状态和道具来反应字体大小

Question

我正在尝试通过onClick来增加字体大小。

字体大小的状态在此组件中进行管理；我还创建了一种增加字体大小的方法：

import React, { Component } from 'react';
import NewsCard from './NewsCard'
import MenuBar from './MenuBar'
import AccordionCard from './AccordionCard'

class MainPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      accordionFontSize: 15
    }
  }


  increaseFontSize = () => {
    this.setState({accordionFontSize: 30});
    console.log('hello2');
  }

  render() {

    const { accordionFontSize } = this.state;

    return (
      <div>
          <div>
              <MenuBar increaseFontSize={this.increaseFontSize} />
          </div>
          <br/>
          <AccordionCard accordionFontSize={accordionFontSize} />
      </div>
    );
  }
}

export default MainPage;

单击该组件可增加字体大小的组件位于此处：

import React, { Component } from 'react';
import LeagueSelect from './LeagueSelect'
import IncreaseTexSize from './TextIncrement'
import DecreaseTexSize from './DecreaseTextSize'


class MenuBar extends Component {
  render() {

    let leagueSelectStyle = {
            float: 'left',
            paddingLeft: 10,
            paddingRight: 12
          }
    let increaseTextSize = {
            float: 'left',
            paddingLeft: 5,
          }
    let decreaseTextSize = {
            float: 'left',
            paddingRight: 5
          }

    return (
      <div>
      <div style={leagueSelectStyle}><LeagueSelect /></div> <div style={increaseTextSize} onClick={this.props.increaseFontSize}><IncreaseTexSize /></div><div style={increaseTextSize}><DecreaseTexSize /></div>
      </div>
    );
  }
}

export default MenuBar;

这是实际上增加尺寸的第三部分：

import React, { Component } from 'react'
import { Accordion, Icon } from 'semantic-ui-react'

export default class AccordionCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
    activeIndex: null,
    player: "Antonio Brown",
    headline: "Rapsheet: Steelers sending A.B. to the Bills",
    position: "WR",
    league: "NFL",
    team: "Steelers",
    city: "Pittsburgh",
    report:"NFL Network's Ian Rapoport reports the Steelers are closing in on a deal to trade Antonio Brown to the Bills.",
    spin: "Wow. It will be interesting to see what the Bills are sending the Steelers' direction, as Buffalo doesn't have any extra picks in the early rounds, holding their own first-, second-, and third-round picks, with the first being at No. 9 overall. Going from Ben Roethlisberger and Pittsburgh to Josh Allen and Buffalo is a significant downgrade for Brown both in football and life. His fantasy prospects will take a big hit with this deal. More to come when the deal is final.",
    source: "Ian Rapoport",
    linkSource: "https://twitter.com/RapSheet/status/1103874992914096131",
    fontSize: `${this.props.accordionFontSize}px`
  }
}

  handleClick = (e, titleProps) => {
    const { index } = titleProps
    const { activeIndex } = this.state
    const newIndex = activeIndex === index ? -1 : index

    this.setState({ activeIndex: newIndex })
  }

  render() {

    let reportAndSpin = {
      float: 'left',
      textAlign: 'justify',
      paddingLeft: "2%",
      paddingRight: "2%",
    }

    let accordionStyle = {
      float: 'left',
      paddingLeft: "2%",
      fontSize: this.state.fontSize
    }

    const { activeIndex, headline, report, spin } = this.state

    return (
      <div>
      <div style={accordionStyle}><Accordion>
        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
          <Icon name='dropdown' />
          {headline}
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 0}>
          <p style={reportAndSpin}>
              {report}
          </p>
          <p style={reportAndSpin}>
              {spin}
          </p>
        </Accordion.Content>
      </Accordion></div>
      </div>
    )
  }
}

我知道该方法已正确支持，因为一次单击了gainFontSize方法console.logs'hello2'。无论出于何种原因，它似乎都没有更新字体大小。