ReactJS调用字体修改方法时fontSize不生效问题求助

嘿，我帮你排查出两个关键问题，改完就能正常工作啦：

问题1：类方法的this绑定缺失 #

在React类组件里，自定义的类方法默认不会自动绑定组件实例的this。当输入框触发onChange事件调用changeSize时，方法里的this会变成undefined，自然没法调用this.setState更新状态。

解决办法（选其一即可）： #

• 方法一：在构造函数里手动绑定
  在constructor里加上一行：

  this.changeSize = this.changeSize.bind(this);
  

• 方法二：用箭头函数定义类方法
  把changeSize改成箭头函数，自动绑定组件实例的this：

  changeSize = (event) => {
    this.setState({ fontSize: event.target.value });
  }
  

• 方法三：在onChange里用箭头函数包裹
  输入框的onChange写成：

  <input type="number" onChange={(e) => this.changeSize(e)} />
  

问题2：CSS字体大小缺少单位 #

输入框返回的event.target.value是字符串类型（比如"64"），直接赋值给fontSize的话，CSS无法识别没有单位的数值，必须加上px（或者你需要的其他单位）。

修改render里的样式对象： #

let styleobj = {
  background: "blue",
  fontSize: `${this.state.fontSize}px` // 拼接单位让CSS识别
};

完整修改后的代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Test extends React.Component{
  constructor(props){
    super(props)
    this.state={
      fontSize:64
    }
    // 方法一：构造函数绑定this
    this.changeSize = this.changeSize.bind(this);
  }

  changeSize(event){
    // 转成数字后存状态，避免字符串类型的数值潜在问题
    this.setState({ fontSize: Number(event.target.value) });
  }

  render(){
    let styleobj = {
      background:"blue",
      fontSize: `${this.state.fontSize}px`
    };
    return (
      <div>
        <input type="number" onChange={this.changeSize} />
        <div style={styleobj}>测试字体大小</div>
      </div>
    )
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));

这样修改后，用数字输入框调整数值，就能实时改变字体大小啦～

内容的提问来源于stack exchange，提问作者Sue-May Xu