如何访问组件的 ref？

IT技术 javascript reactjs
2022-07-10 01:29:27

我正在使用react-jsonschema- form 从 JSON 模式创建表单。在这个 JSFiddle 示例中，我创建了一个由单个<input type="file">字段组成的表单。

FileWidget组件的一个实例用于呈现该字段，正如您在源代码中看到的那样，它<input>在this.inputRef.

我想使用这个 ref 向输入字段添加其他属性，但我不知道如何componentDidMount从MyForm?

JSFiddle示例中组件的源码为：

class MyForm extends React.Component {
  constructor(props) {
    super(props);   
    this.uiSchema = {};
    this.schema = {
      "title": "Files",
      "type": "object",
      "properties": {
        "file": {
          "type": "string",
          "format": "data-url",
          "title": "Single file"
        },
      }
    }
  };

  componentDidMount() {
    // How can I get access to the FileWidget's inputRef property here?
  }

  render() {
    return (
      <Form    
        schema={this.schema} 
        uiSchema={this.uiSchema}
        liveValidate />
    )
  }
};
1个回答

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} ... />

编辑oq7xqoz46q

边注：

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

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

然后你可以inputRef得到

<FileWidget setInputRef={ref => { this.inputRef = ref } ... />
其它你可能感兴趣的问题
上一篇使用 Redux 更改根组件的状态/props？ 下一篇如何从 react-redux 中的 Promise 对象获取普通的 json 对象