Question

我正在研究React。
我有一个名为 on_render_cell 的方法，在该方法中创建了一个div，然后根据某些条件在该div中插入图像。
这是我将图像插入div中的方法，我得到了所需的图像。现在我的目标是：
单击图像时打开模态。当我尝试分配 onClick = {this.openModal（）} 时，模态不会弹出。我注意到这是因为这指向> nr_counter$NAME[2] = "Bohuslav Diviš" > File_data$name[p] = "Bohuslav Diviš" > File_data$name[p] %in% nr_counter$NAME [1] TRUE。有人可以帮我如何调用写在on_render_cell（）的结果变量中的图像标签的单击处理程序上的openModal（）？

<img>

目标：点击图像时打开模态。即访问组件的openModal（）

Answer 1

对不起，但您做得不好。当你写的时候：

onClick={() => this.openModal()}

每次元素渲染时您都在创建一个新函数。相反，我建议您将方法绑定到构造函数中：

this.openModal = this.openModal.bind(this);

并在输入中输入：

onClick={this.openModal}

这样，您不会在每次渲染元素时创建新函数，而openModal将指向元素本身。

如果我正确理解问题所在，则在此行中：

result='<img id="aaa"... onClick={console.log(this)} />';

您是否尝试过传递JSX而不是字符串？将函数openModal绑定到构造函数中，然后将this.openModal函数传递给img。我认为，如果您将传递JSX而不是字符串，那么它将起作用

更新

好的，所以我从Here中提取了代码并对其进行了一些编辑：

export class CellTemplate extends SampleBase {
  getCellContent(date) {
      if (date.getMonth() === 10 && date.getDate() === 23) {
        return ( < div > < img src = "src/schedule/images/thanksgiving-day.svg" / > < div className = "caption" > Thanksgiving day < /div></div > );
      }

      cellTemplate(props) {
          if (props.type === "monthCells") {
            return ( < div className = "templatewrap" > {
                this.getCellContent(props.date)
              } > < /div>);
            }
            return;
          }
          render() {
            return ( < div className = 'schedule-control-section' >
              <
              div className = 'col-lg-12 control-section' >
              <
              div className = 'control-wrapper' >
              <
              ScheduleComponent cssClass = 'cell-template'
              width = '100%'
              height = '650px'
              selectedDate = {
                new Date(2017, 11, 15)
              }
              cellTemplate = {
                this.cellTemplate.bind(this)
              } >
              <
              ViewsDirective >
              <
              ViewDirective option = 'Month' / >
              <
              /ViewsDirective> <
              Inject services = {
                [Month, Resize, DragAndDrop]
              }
              /> <
              /ScheduleComponent> <
              /div> <
              /div> <
              /div>);
            }
          }

在 cellTemplate 中，您可以看到如何正确调用 getCellContent ，在 getCellContent 中，您可以看到我将如何退还JSX。

Answer 2

您可以将诸如myRef之类的变量作为道具提供给组件，然后在组件的onComponentDidMount中分配给道具myRef当前实例（this）。 this.props.myRef = this，那么您可以在父组件中使用myRef方法。有关更多信息，请查看此帖子React.js - access to component methods

如何在React中访问组件方法？

2 个答案: