Javascript 访问React（v15）的render（）中的DOM

在研究React时，我发现了以下代码

据我所知，React中的DOM通常是通过Refs访问的

然而，这段代码使用文档，我还没有见过有人使用这种方式

我误解了吗？这是正式的方式吗

另外，document.form与document.getElementByTagNameform相同吗

任何参考资料都会有帮助

    export default class IssueAdd extends React.Component {
    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        const form = document.forms.issueAdd;
        this.props.createIssue({
            owner: form.owner.value,
            title: form.title.value,
            status: 'New',
            created: new Date(),
        });
        form.owner.value = '';
        form.title.value = '';
    }

    render() {
        return (
            <div>
                <form name="issueAdd" onSubmit={this.handleSubmit}>
                    <input type="text" name="owner" placeholder="Owner" />
                    <input type="text" name="title" placeholder="Title" />
                    <button>Add</button>
                </form>
            </div>
        );
    }
}

---

在React中，不推荐通过文档变量访问DOM

正如您所说的，您应该为元素创建一个引用，并通过该引用访问它。有关参考文献的更多信息：

简短示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  getOffset = () => {
    console.log(this.myRef.current.offsetTop); // will output the offset top of the div
  }

  render() {
    return <div ref={this.myRef} onClick={this.getOffset}>Test div</div>;
  }
}

这将在单击时记录div顶部的偏移量

---

信息：React.createRef是在React 16.3中添加的，在此之前，您已经有了回调引用-在文档中有更多关于它的信息…

React只是另一个javascript库，因此它具有您可能在普通javascript中使用的所有功能，比如访问窗口对象或文档对象。 但这是否意味着你应该使用它们，绝对不是。直接DOM操作是非常昂贵的操作

基本上，React的工作原理是。虚拟DOM使React更新实际DOM变得太容易、太快，而不需要过多直接DOM操作的开销

说到refs，因为我们不想使用documentobjectreact提供的refs访问HTML元素，这将有助于进入特定元素并快速访问它，它将从虚拟DOM返回数据

关于参考文献的两篇好文章：

偏离航线

顺便说一句：欢迎来到React的精彩世界：

---

这个问题是关于v15的，从你那里得到一个例子会很有帮助，而不是指向文档。