初始化空状态，将在 React 中接收一个数字

Question

在 React 控制的表单中，数字输入的正确初始值是多少？

如果我设置myNumber为''、[]、 或{}，它可以工作，但是 onChange 值会变成"25"而不是25，然后我必须将其转换回整数。如果我将其设置为0输入加载值为 0，并且我宁愿输入加载为空。

最好的方法是什么？

编辑：下面的评论和答案都集中在设置/转换更改值。我的问题是确认这是否是唯一的选择。如果它是一个数组，我们将从一个空数组开始；一个对象将以空对象开始；字符串将以空白字符串开头。

初始化数字状态以将其设置为另一种类型然后进行转换的唯一方法吗？

class NumberForm extends Component {
  state = {
    myNumber: ''
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  render() {
    return (
      <form>
        <input
          type="number"
          name="myNumber"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
      </form>
    );
  }
}

2022 编辑：今天我会如何处理这个问题......

使用 Hooks 和 TypeScript

const NumberForm: React.FC = () => {
  const [myNumber, setMyNumber] = useState<number>()

  return (
    <form>
      <input
        type="number"
        name="myNumber"
        value={myNumber}
        onChange={e => setMyNumber(e.target.value)}
      />
    </form>
  );
}

Answer 1

您应该解析 int，因为该值是从 event.target.value 读取的，它始终会为您提供字符串

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: parseInt(value, 10) })
  }