Question

我试图在文本样式上设置fontsize的条件，但我提出的条件并不是我需要的，我不知道错误在哪里。< / p>

这是我的html文件：

  <body>

<div id="container"></div>

<script type="text/jsx">

ReactDOM.render(
 <div>
<FontChooser min='4' max='30' size='16' text='Fun with React!' bold='false'/>
</div>,
document.getElementById('container'));

</script>
</body>

这是我的js文件：

class FontChooser extends React.Component {
  constructor(props) {
      super(props);
      var currsize ;
      var currmin ;
      var currmax ;
      if ( this.props.min  <  this.props.max ) {
        currmin = this.props.min;
        currmax = this.props.max;
        if ((this.props.size > this.props.max) && (this.props.min > 0)) {
          currsize = this.props.max;
        } else if ((this.props.size < this.props.min) && (this.props.min > 0)) {
          currsize = this.props.min;
        } else if ((this.props.size > this.props.max) && (this.props.min <= 0)) {
          currsize = this.props.max;
          currmin = 1;
        } else if ((this.props.size < this.props.min) && (this.props.min <= 0)) {
          currsize = 1;
          currmin = 1;
        } else if ((this.props.size > this.props.min) && (this.props.size < this.props.max)){
          currsize = this.props.size;
          console.log(this.state);
        }
      } else if (this.props.min >= this.props.max) {
        console.log(this.state);
        currmin = this.props.min;
        currmax = this.props.min;
        currsize = this.props.min;
      }
      console.log(this.props)
      this.state = { hidden: true, checked: false, color: 'black', currmax, currmin, currsize};
      this.handleClick = this.handleClick.bind(this);
      this.handleDoubleClick = this.handleDoubleClick.bind(this);
      this.handleCheck = this.handleCheck.bind(this);
      this.incrementSize = this.incrementSize.bind(this);
      this.decrementSize = this.decrementSize.bind(this);
      console.log(this.state);
    }

    handleClick(){
      this.setState({hidden: !this.state.hidden})
    };
    handleCheck() {
      this.setState({checked: !this.state.checked})
    };

    incrementSize() {
      if (this.state.currsize < this.state.currmax) {
      this.setState({
        currsize: this.state.currsize + 1
       })
    } else if (this.state.currsize === this.state.currmax) {
      this.setState({ color : 'red' })
    }
   };

    decrementSize() {
      if (this.state.currsize > this.state.currmin) {
        this.setState({
           currsize: this.state.currsize - 1
          })
      }
    };
     handleDoubleClick() {
       this.setState( { color : (this.state.color == 'red' ? 'black' : 'red') } );
       this.setState ({ currsize: this.props.size });
     };

    render() {
      var bold = this.state.checked ? 'bold' : 'normal';
      var color = this.state.color;
    return(
           <div>
           <input type="checkbox" id="boldCheckbox" defaultChecked={this.state.checked} onChange={this.handleCheck} hidden={ !this.state.hidden ? false : true}/>
         <button id="decreaseButton" onClick = { this.decrementSize.bind(this) } hidden={ !this.state.hidden ? false : true}>-</button>
           <span id="fontSizeSpan" hidden={ !this.state.hidden ? false : true}>{this.state.currsize}</span>
           <button id="increaseButton" onClick = { this.incrementSize.bind(this) } hidden={ !this.state.hidden ? false : true}>+</button>
           <span id="textSpan" onClick={this.handleClick} onDoubleClick={this.handleDoubleClick} style= {{ color: color, fontWeight: bold, fontSize: this.state.currsize }}>{this.props.text}</span>
           </div>
    );
    }}

我在控制台中获得的是，对于所有变量currmin，currsize和currmax，它们采用最小值。

{hidden: true, checked: false, color: "black", currmax: "4", currmin: "4", …}
checked : false, 
color : "black", 
currmax : "4", 
currmin : "4", 
currsize : "4", 
hidden : true

然而我需要他们来解决山姆值

currmax = 30, 
currmin = 4, 
currsize = 16

Answer 1

尝试if ( parseInt(this.props.min) < parseInt(this.props.max) ) {。因为props.min n max都是字符串，所以它们被比较为字符串而不是数字

带有逻辑和javascript的if语句中的错误

1 个答案: