重新渲染后哪个组件需要键来保持焦点？

Question

我被这个问题困扰了好几天，我已经浏览了React.js - input losing focus when rerendering，其中列出了一些关于失去对第一次击键的关注的建议和解决方案 - 但我仍然没有设法解决它。我此时惊慌失措，所以可能错过了明显的解决方案。

• “其他”TextEditor 在第一次击键后总是失去焦点
• 如果资源超过 1 个，“资源”文本编辑器会失去焦点。因此，必须有一些正确的东西才能让它只使用一个 TextEditor 来保持焦点...

这是一个显示焦点丢失的代码框：https://codesandbox.io/s/fervent-tereshkova-bz1wz?file=/agenda.js

Answer 1

onChange = ({ value }) => {
    if (this.props.onChange) {
      // Check to see if the document value really has changed
      if (value.document !== this.state.value.document) {
        this.props.onChange(value);  //  <----- This line is ruining it for you
      }
    }
    this.setState({ value });
  };

指示的行毁了你，我不明白你需要它做什么。 如果您想在状态真正改变时触发回调，您应该通过componentWillUpdate(object nextProps, object nextState) 执行此操作，并将nextState.value.document 与this.state.value.document 进行比较，如下所示：

componentWillUpdate = (object nextProps, object nextState) => {
  if (nextState.value.document !== this.state.value.document)
    this.props.onChange(nextState.value);
}

...或者您可以在状态更新后使用setState callback 触发代码：

onChange = ({ value }) => {
  var newDocValue = value.document;
  var oldDocValue = this.state.value.document;
  this.setState({ value }, () => {
    if (oldDocValue !== newDocValue)
      this.props.onChange(newDocValue);
  });
}

我个人会将整个组件重写为一个函数组件，因为我认为使用 useEffect 钩子可以更轻松地处理生命周期和更改反应。