Question

我可能正在考虑这个错误，但是我想有两个部分，父母和孩子，其中孩子有一个输入元素，希望用户输入数字。父组件的回调仅在有效号码上被调用。这是通过Typescript和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的角度来看它们是无效的。但是，如果我仅依靠状态，那么我似乎无法让父组件使用新的道具来更新子组件。

我也创建了以下CodePen来进行复制。请注意，如何无法在输入字段中输入小数点。我在哪里错了？

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'));`

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

1 个答案: