javascript - React - 输入值生成一个不起作用的数字

Question

我正在尝试学习 React，但在尝试输入一个数字然后在按下提交按钮时传递该数字时遇到了困难。大部分工作(如下)但是当我点击提交时，我的号码被转换为字符串，但我不知道是什么。这里的任何帮助或指导都会有帮助，谢谢

    import React from 'react';
import Stars from './star'

class StarMaker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numStars: 200,
    }
  }
  setNumStars(num) {
    console.log(typeof num);
    const numPulses  = [...Array(num).keys()];
    console.log(numPulses);
    this.pulses = numPulses.map(i => this.generatePulse(i));
  }

  handleClick() {
    this.setNumStars(this.state.numStars)
  }

  handleChange(e) {
    console.log(e);
    this.setState({
      numStars: Number(e.target.value)
    })
  }

  getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  generatePulse(i) {
    const props = {
      key: i,
      top: this.getRandomNumber(-385, 556),
      left: this.getRandomNumber(1, 2430),
      scale: `scale(${this.getRandomNumber(1, 2)})`,

    }
    return (<Stars {...props} />)
  }
  componentWillMount() {
    const numPulses  = [...Array(this.state.numStars).keys()];
    this.pulses = numPulses.map(i => this.generatePulse(i));
  }
  render() {
    console.log('render');
    return (
      <div>
        {this.pulses}
        <input value={this.state.numStars} onChange={this.handleChange.bind(this)} type="number"></input>
        <button onClick={this.handleClick.bind(this)}>Submit</button>
      </div>
    );
  }
}

export default StarMaker;

Answer 1

无论您指定什么类型，HTML 中的input 值始终是字符串。话虽如此，每当您需要使用 number 数据类型而不是 string 时，您都必须显式地转换它，基本上是通过解析字符串中的数值:

parseInt(this.state.numStars, 10);