小编kbu*_*gie的帖子

在 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 = () …

我有未知数量的项目将显示在网格中。当一行不完整时，就像屏幕截图中显示的第二行一样，我需要将项目向右对齐。

我可以使用 达到效果direction: rtl，但这会改变项目的顺序，这是我不想做的。

我怎样才能做到这一点？此处可使用 Codepen 进行故障排除：https://codepen.io/keefblurgu/pen/gOvzWbw

编辑：添加了堆栈片段

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid > div {
  padding: 10px;
  text-align: center;
  background-color: coral
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>