React 16.4-手动表单输入填充及其来自GetDerivedStateFromProps的更新？

Question

在React16.4上更新后，我面临一个问题，在GetDerivedStateFromProps逻辑中有一些突破性的变化。现在，它会在每个组件更新时在传入的和自己的组件的道具上触发。

因此，我已经阅读了文档和手册，但仍然不知道在哪些情况下表单输入字段应该基于传入的道具(Controlled Component)，同时能够通过用户自己的输入进行修改？

我也尝试过这篇文章，但它只涉及一次性更新的情况，而不是手动输入的情况：为什么在SetState之后调用getDerivedStateFromProps？

import PropTypes from 'prop-types'
import React from 'react'

export class NameEditor extends React.Component {
  static propTypes = {
    currentLevel: PropTypes.number
  }

  static defaultProps = {
    currentLevel: 0
  }

  constructor(props) {
    super(props)

    this.state = {
      currentLevel: 0
    }
  }

  static getDerivedStateFromProps(nextProps) {
    return {
      currentLevel: nextProps.currentLevel
    }
  }

  _handleInputChange = e => {
    this.setState({
      currentLevel: e.target.value
    })
  }

  render() {
    const { currentLevel } = this.state

    return (
        <input
          placeholder={0}
          value={currentLevel}
          onChange={this._handleInputChange}
        />
    )
  }
}

export default NameEditor

Answer 1

更新：

目前，_handleinputchange方法将只修改子组件的状态，该子组件将调用GetDerivedStateFromProps。

该方法的工作方式是，当每个newProps或setState调用发生时都会调用它。

null

为了解决这个问题：我们将需要一个来自父组件的回调函数，它执行与HandleInputChange相同的工作。

所以：

1. 向父组件添加HandleCurrentLevelChange方法，该方法将只有一个参数e.target.value，它的任务是修改处于父状态的CurrentLevel。
2. 将创建的HandleCurrentLevelChange所需名称传递给NameEditor。
3. 按以下方式修改您孩子的handlr:

  _handleInputChange = (e, cb) => {
    this.setState({
      currentLevel: e.target.value
    }, () => {
      cb && cb(e.target.value) //this makes the callback optional.
    });
  }

        <input
          placeholder={0}
          value={currentLevel}
          onChange={(e) => this._handleInputChange(e, handleCurrentLevelChange)}

onchange属性和处理程序的新行为将允许更改同时发生在您的子级和父级。