ReactJs：从字体更改方法调用时，字体大小不会改变

Question

我写了一个非常简单的ReactJs代码。我将fontSize设置为我的状态。我想在改变输入值的同时改变我的fontSize。但这并不起作用。有人能帮忙吗？提前感谢。

这是我的js代码：

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
          }
       }
       changeSize(event){
        this.setState({
            fontSize:event.target.value
        });
      }

      render(){
          let styleobj = {background:"blue",fontSize:64}
          return(
              <section style={styleobj}>
              <h2 className="tryout" style={{fontSize:this.state.fontSize}}>{this.state.fontSize}</h2>
              <input value={this.state.fontSize} onChange={this.changeSize.bind(this)}/>
              </section>
          );

      }
    }


    ReactDOM.render(<Test name="Sumei" value="123"/>,document.getElementById("root"));

- Sue-May Xu

---

你需要指定fontSize的值（em，px，rem，％...） - Dyo

你是否遇到了一个错误？ - Agney

Answer 1

您需要指定字体大小的值 (em、px、rem、% ...)

  render() {
    let styleobj = { background: "blue", fontSize: 64 }
    return (
      <section style={styleobj}>
        <h2 className="tryout" style={{fontSize: this.state.fontSize+'px'}}>{this.state.fontSize}</h2>
        <input value={this.state.fontSize} onChange={this.changeSize.bind(this)} />
      </section>
    );

  }
}

- Liam

---

对于像素，仅使用数字即可。 - Tomasz Mularczyk