Question

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

我有一个h3标记，我想在其中传递对我的onChange函数的引用，以便我可以获取它的innerHTML文本（由contentEditable更改）并传递新的更改为我的后端服务器的数据。但是，我无法获取想要更改的正确循环h3的innerHTML（新数据）。

我在线阅读了文档，引用可以帮助我解决这个问题，但是它仅提供了一个示例，说明如何在render方法中执行此操作，而不是如何将其传递给引用中的函数。

简而言之，我希望能够使用新数据修改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

_setSelectedDate = date => {
    this.setState({
        selectedDate: date,

    });
};

将起作用。但是，由于onChange = (event) => { const nodeContent = this.myRef.current.innerHTML; console.log(nodeContent); }; <h3 ... ref={this.myRef} onInput={this.onChange} ... >传递了目标元素，您甚至不需要使用onInput：

ref

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

1 个答案: