React Contenteditable 不关注 Ref答案

【问题标题】：React Contenteditable Not Focusing with RefReact Contenteditable 不关注 Ref
【发布时间】：2020-05-12 06:40:07
【问题描述】：

感觉自己快要发疯了——似乎无法摆脱这一点。输入任何文本后，我们立即失去焦点。在 ref 上调用 focus() 似乎完全没有效果。

UpdatePage.js

export default class UpdatePage extends Component {

  constructor(props) {
    super(props);
    const that = this;

    auth.onAuthStateChanged((user) => {
      db.collection('users/' + user.uid + '/updates')
      .onSnapshot(function (querySnapshot) {
        const updates = [];
        querySnapshot.forEach(function (doc) {
          const updateData = doc.data();
          updates.push({...updateData, doc_id: doc.id});
        });
        that.setState({
          updates: updates,
        });
      });
    });
  }

  render() {
    const todaysDate = new Date();

    return (
      <div>
        <UpdateDeck date={todaysDate} {...this.state}/>
      </div>
    );
  }
}

更新牌组

export default class UpdateDeck extends Component {
  render() {
    return <div key={this.props.date}>
      <UpdateCard key={"A"} {...this.props}/>
      <UpdateCard key={"B"} {...this.props}/>
    </div>;
  }
}

UpdateCard.js

export default class UpdateCard extends Component {
  render() {
    return <div>
      <Card>
        <ListGroup>
          {this.props.updates
            .map((update, i) => {
              return <Update key={'Update_' + update.doc_id}
                             update={update}
                             {...this.props}/>;
            })}
        </ListGroup>
      </Card>
    </div>;
  }
}

Update.js：

export default class Update extends Component {

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  updateCard(doc_id, text) {
    const ref = this.myRef.current;
    db.collection(...).doc(doc_id).update(...)
      .then(function () {
        ref.focus();
      })
  }

  render() {
    return <ContentEditable
        key={this.props.update.doc_id}
        html={this.props.update.text}
        innerRef={this.myRef}
        disabled={false}
        onChange={e => this.updateCard(this.props.update.doc_id, e.target.value)}
      />
  }

}

不用说，db.update() 函数更新了this.props.update.text，但我想知道这是否是我的问题的根源，因为我没有使用状态。

使用这个 ContentEditable npm 库：https://www.npmjs.com/package/react-contenteditable

【问题讨论】：

你能购买 ContentEditable 的代码还是来自某个库
@ShubhamKhatri 这是图书馆：npmjs.com/package/react-contenteditable
无论如何，更新组件都会在更改时重新安装。您可以通过登录componentDidMount函数来检查它
@ShubhamKhatri 是的，你说得对，它正在重新安装。即使我向 ContentEditable 添加密钥，它似乎也无法解决问题。
其实不是，不是上面的评论。只需从 <div key={this.props.date}> 中删除 key={this.props.date}

标签： reactjs focus contenteditable ref

【解决方案1】：

您失去焦点的原因是组件正在重新安装而不是重新渲染。

现在发生这种情况的一个原因是因为您向组件添加了一个关键道具，该道具在重新渲染之间发生变化。发生这种情况时，对组件已更改的内容做出反应并重新挂载它。

现在您在 div 上添加一个键 key={this.props.date}，我假设 contentEditable 日期属性的每次更改都可能发生更改，导致它的每个子项都重新挂载

你也不需要 key prop，除非你从循环中返回元素

你可以简单地编写你的代码

export default class UpdateDeck extends Component {
  render() {
    return <div>
      <UpdateCard {...this.props}/>
      <UpdateCard {...this.props}/>
    </div>;
  }
}

【讨论】：