将 ref 传递给具有循环 ID 的函数？

Question

我正在尝试创建一个非常简单的 CMS，它允许用户更新页面上的某些区域。

我有一个h3 标记，我希望能够将引用传递给我的onChange 函数，以便我可以获取它的innerHTML 文本（由contentEditable 更改）并传递被更改的新数据到我的后端服务器。但是，我无法获取想要更改的正确循环 h3 的 innerHTML（新数据的）。

我在网上阅读了 ref 可以帮助我解决这个问题的文档，但它只给了我一个示例，说明它在 render 方法中的位置，而不是如何将它传递给 ref 中的函数。

简而言之，我希望能够用新数据修改我的 h3 标签（在 cms 内）并将其发送到我的后端服务器以上传到我的数据库。

另外，我尝试不把它放在函数中，我设法访问 myRef.current 但是在控制台中它显示为 null 我希望能够访问指定的引用blogTopic Id，所以我知道我要发送到我的后端服务器的映射 id。

我有很多代码，所以我只展示我卡住的部分：

class Blogtopics extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {
      blogData: [],
      blogTopic: "",
    };
  }

  Selectblogtopics = async () => {
    const blogTopics = await blogtopicsService.selectblogTopics();

    this.setState({
      blogData: blogTopics
    });
  };

  editorData = (event, content) => {
    let data = content.getData();

    //this.setState({ blogContent: data });
  };

  onChange = (event, content) => {
    const node = this.myRef;
    //where im stuck
    console.log(node);
  };

  render() {
    const node = this.myRef;

    console.log(node);
    return (
      {this.state.blogData.map((rows, index) => (
        <div className="blogWrapper" key={uuid()}>
            <div className="col-md-6">
              <h3
                suppressContentEditableWarning
                contentEditable={this.state.isEditing}
                style={
                  this.state.isEditing === true
                    ? { border: "1px solid #000", padding: "5px" }
                    : null
                }
                onInput={e => this.onChange(e)}
                ref={e => this.onChange(e, this.myRef)}
                //onBlur={e => this.onChange(e)}
              >
              {rows.blog_category}
        </div>
      ))}
    );
  }
}

export default Blogtopics;

Answer 1

onChange = (event) => {
  const nodeContent = this.myRef.current.innerHTML;
  console.log(nodeContent);
};

<h3 ... ref={this.myRef} onInput={this.onChange} ... >

会起作用。但是由于onInput 传递了目标元素，您甚至不需要使用ref：

onChange = ({ target }) => {
    console.log(target.innerHTML);
}

<h3 onInput={this.onChange} >