使用 React 状态允许临时无效的数字输入

Question

我可能想错了，但我想有两个组件，一个父组件和一个子组件，其中子组件有一个输入元素，用户应该在其中输入一个数字。父组件的回调只会在有效数字上被调用。这是通过打字稿和parseFloat强制执行的。

class Child extends React.Component {
  state = { number: '' };
  inputChanged = (ev) => {
    const stringy = ev.target.value;
    this.setState({number: stringy});
    const parsed = parseFloat(stringy);
    if (parsed) {
      this.props.numberChanged(parsed);
    }
  }
  render() {
    return <input
      type="text"
      value={this.props.number || this.state.number}
      onChange={this.inputChanged}
    />
  }
}
class Container extends React.Component {
  state = { number: 5 };
  numberSet = (value: number) => {
    this.setState({number: value});
  }
  render() {
    return <Child
      number={this.state.number}
      numberChanged={this.numberSet}
    />;
  }
}

挑战在于我希望能够使用 props 设置和更改子组件中的数字值。但我也想允许用户输入数字。

如果我只依靠道具而不声明，那么当他们输入小数点之类的东西时，它们不会出现，因为从parseFloat的角度来看它们是无效的。但是如果我只依赖状态，那么我似乎无法让父组件使用新 props 更新子组件。

我也创建了以下代码笔来重现。请注意，您不能在输入字段中键入小数点。我哪里出错了？

Answer 1

你在这里用模式使事情复杂化。问题本身可能是不正确和误导的。

但是为了解决无法使用十进制值的问题，问题是parseFloat('52.') 52并且由于this.props的变化，代码在每次更改时都运行，并且您永远不会成功添加"." ！

使用如下所示的受控组件应该可以解决您的所有问题！

class Child extends React.Component {
    render() {
       return <input
                type="text"
                value = {this.props.number}
                onChange={this.props.numberChanged}
              />
       }
}
class Container extends React.Component {
   state = { number: 5 };
   numberSet = (ev) => {
       let value = event.target.value;
       this.setState({number: value});
   }
   render() {
      return <Child
              number={this.state.number}
              numberChanged={this.numberSet}
             />;
   }
}
React.render(<Container />, document.getElementById('app'));`