javascript - 如何使用 react 在 jquery 中添加 props 函数

Question

希望您遇到与我相同的问题。我有需要像(单击，更改)这样的 jquery 事件的 react 代码。这是我的代码。

export default class SamplePreviewComponent extends React.Component<Props, any> {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderChoiceButton();
  }

  renderChoiceButton() {
    $("input.st").on("click", function() {
      let value = $(this).val();
      this.props.addDependentSample(value);
    });
  }

  render() {
    const { sampleTree } = this.props;
    return (
      <div className="row pl-1 pr-1 pt-0 mb-1">
        <div className="columns bg-black20 pt-1 pb-1 border-radius-sm">
          <div className="mb-1">
            <p className="subheader">
              <strong>
                <small>SAMPLE #1</small>
              </strong>
            </p>
            {sampleTree.root.label.trim().length > 0 && <h4>{sampleTree.root.label}</h4>}
            {sampleTree.root.subLabel &&
              sampleTree.root.subLabel.trim().length > 0 && (
                <span className="subheader">
                  <small>
                    <strong>{sampleTree.root.subLabel}</strong>
                  </small>
                </span>
              )}
          </div>
          <div>
            <div
              dangerouslySetInnerHTML={{ __html: sampleTree.root.generatedHtml }}
              className="red"
            />
          </div>
        </div>
      </div>
    );
  }
}

如果你检查我组件的返回值。添加了 dangerouslySetInnerHTML。输出是这样的

<div>
  <div class="fancy-checkbox fancy-hover small mb-0">
    <input type="checkbox" class="st" id="_0" name="17[]" value="1">
    <label for="_0">1</label>
  </div>
  <div class="fancy-checkbox fancy-hover small mb-0">
    <input type="checkbox" class="qt" id="_1" name="17[]" value="2">
    <label for="_1">2</label>
  </div>
</div>

当用户点击复选框时。我将使用 jquery 添加事件

renderChoiceButton() {
  $("input.st").on("click", function() {
    let value = $(this).val();
    this.props.addDependentSample(value);
  });
}

我收到错误消息无法读取未定义的属性“addDependentSample”。也许吧，因为它来自 react props 而 jquery 无法读取它。如何使用 jquery 添加事件以连接函数以使用react？

Answer 1

有几种方法可以解决此错误 - 一种简单的方法是存储对组件实例的引用(即 componentInstance，如下所示)，然后通过它访问组件的 props例如，像这样:

renderChoiceButton() {

    // Store reference to component for access in click handler
    const componentInstance = this;

    $('input.st').on('click', function() {

       let value = $(this).val();
       // Access props for the component via componentInstance
       componentInstance.props.addDependentSample(value);
    });
}