为什么按钮在状态值更改时未禁用（ReactJS）

Question

我试图在输入等于 0 时禁用按钮。开始时，按钮被禁用，但是当我尝试增加输入 > 0 并将输入减少回 0 时，按钮不会被禁用.constructor() {    super();    this.state = {      number: 0,    };  }onInputChange = (e) => {    this.setState({ number: e.target.value });};  render() {    const { number} = this.state;    return (      <Fragment>        <input          value={number}          type="number"          max="100"          min="0"          onChange={this.onInputChange}        ></input>        <Button          style={{ display: "block" }}          disabled={number === 0 ? true : false}        >          Print        </Button>有人可以向我解释为什么状态改变但禁用属性不起作用？如果我将条件设置为：  <Button          style={{ display: "block" }}          disabled={number < 1 ? true : false}        >然后代码工作正常。但我真的很想知道为什么我的第一种方法不起作用。谢谢你。

Answer 1

这可能是由于变量类型。强制类型转换。例如：+'0'得到你0。

你可以试着写成：disabled={Boolean(+number)}

Answer 2

<input 元素返回一个字符串值，即使您将类型设置为数字。因此，使用严格相等 (===) 将字符串 0 与数字 0 进行比较会返回 false。您可以使用 == 为“0”返回 true == 0

disabled={ "0" === 0} // Returns false

disabled={ "0" == 0} // Returns true

或者您可以在设置状态之前使用 parseInt 将字符串转换为整数。然后你可以使用你的第一个比较。

onInputChange = (e) => {

 this.setState({ number: parseInt(e.target.value) });

};

进一步阅读 js 中的比较：Why does string to number comparison work in Javascript