为什么按钮在状态值更改时未禁用（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 == 0disabled={ "0" === 0} // Returns falsedisabled={ "0" == 0} // Returns true或者您可以在设置状态之前使用 parseInt 将字符串转换为整数。然后你可以使用你的第一个比较。onInputChange = (e) => {&nbsp;this.setState({ number: parseInt(e.target.value) });};进一步阅读 js 中的比较：Why does string to number comparison work in Javascript