ReactJs：从字体更改方法调用时fontSize不会更改

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"));

Answer 1

正如Dyo所说，您需要指定字体大小的值 (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>
    );

  }
}