如何访问组件的参考？

Question

我正在使用react-jsonschema-form从JSON架构创建表单。在this JSFiddle example中，我创建了一个由单个<input type="file">字段组成的表单。

FileWidget组件的一个实例用于呈现此字段，正如您在the source code中看到的那样，这会将参考存储在<input>中的this.inputRef元素中

我想使用此引用为输入字段添加其他属性，但我无法弄清楚如何从componentDidMount的{​​{1}}方法访问引用？

JSFiddle示例中组件的源代码是：

MyForm

Answer 1

您可以从同一个库中导入和使用ostream以获取参考资料：

FileWidget

旁注：

对于库来说，这不是一种非常直观的方式来公开内部引用。应该是：

import FileWidget from 'react-jsonschema-form/lib/components/widgets/FileWidget'

constructor(props) {
  ...
  this.widgets = {
    FileWidget: (props) => (
      <FileWidget
        {...props}
        ref={ref => {
          this.fileWidget = ref;
        }}
      />
    )
  };
}

componentDidMount() {
  console.log(this.fileWidget.inputRef);
}

<Form widgets={this.widgets} ... />

然后你可以用

获得<input ref={ref => { if (this.props.setInputRef) { this.props.setInputRef(ref); } }} />

inputRef