Question

我正在从父级向子组件发送回调函数，虽然父级根据提供给子级的输入成功更新了状态，但它会立即恢复到初始状态，从而导致浏览器短暂闪烁输入提供然后显示初始状态。有什么办法解决这个问题？这是我的代码：

父：

class App extends Component {
  constructor() {
    super()
     this.state = { item: '' }
     this.getItem=this.getItem.bind(this);
  }

  getItem(val) {
    this.setState({
      item: val
    })
    console.log(this.state.item);
  }

  render() {
    return (
      <div className="App">
      <Input getItem={this.getItem} />
      <h2>{this.state.item}</h2>
      </div>
    );
  }
}

子：

class Input extends Component {
  constructor(props) {
    super(props)

    this.state = { value: '' }
    this.handleChange=this.handleChange.bind(this);
    this.handleSubmit=this.handleSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({
      value: e.target.value
    })
    console.log(this.state.value)
  }

  handleSubmit(e) {
    {this.props.getItem(this.state.value)};
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            <input type="text" name={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="+" />
        </form>
      </div>
    )
  }
}

Answer 1

我能够通过在handleSubmit函数中使用e.preventDefault()来解决这个问题。

在子级中更新具有回调的状态后，父组件恢复到初始状态

1 个答案: