Question

我的父母班级，拥有整个应用程序状态

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: 1,
    };

    this.handleChange = this.handleChange.bind(this);
  };

  handleChange(event) {
    const target = event.target;
    const newValue = target.value;

   if( Math.sign(newValue) === 1 ) {
    this.setState({
      inputValue: newValue
    });
   }

  }

  render() {
    return (
      <EngInput type="number" value={this.state.inputValue} onChange={this.handleChange}/>
    );
  }
}

将状态作为道具传递给我的子组件。

class EngInput extends React.Component {

  render() {
    return (
      <input
        type="number"
        defaultValue={this.props.value}
        onChange={this.props.onChange}
      />
    );
  }
}

我要实现的逻辑是-子输入组件应仅接受正数。如果它为负数，则状态不应更改，UI应该更新为inputValue而不是newValue。

但是，上面的代码中发生的是，即使状态未更改为非负值，UI仍接受负值。

如何实现类似逻辑，如果该值为负，则UI仍应显示状态中的旧正值。

Answer 1

使用value代替defaultValue来控制来自父组件的输入。

class EngInput extends React.Component {
  render() {
    return (
      <input
        type="number"
        value={this.props.value}
        onChange={this.props.onChange}
      />
    );
  }
}

React-将状态传递给子组件

1 个答案: