Доступ к DOM в render () React (v15) - PullRequest
Новая
       54

Доступ к DOM в render () React (v15)

0 голосов
/ 25 августа 2018

Во время изучения React я обнаружил следующий код.

Насколько я понимаю, доступ к DOM в React обычно осуществляется через Refs .

Однако этокод использует document , и я не видел, чтобы кто-нибудь использовал этот способ.

Я неправильно понял?Это формальный способ?

Plus, document.form совпадает с document.getElementByTagName ("form") ?

Любая ссылка будетполезно. 

    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>
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

React - это просто еще одна библиотека javascript, поэтому он обладает всеми возможностями, которые вы могли бы использовать в простом JavaScript-коде, например, доступ к окну объекту или документу объекту.Но значит ли это, что вы должны их использовать, абсолютно НЕТ и вы найдете причины здесь .Прямые манипуляции с DOM - это очень дорогостоящая операция.

По сути, React работает над концепцией виртуального DOM .Виртуальный DOM упрощает и ускоряет 1012 *, чтобы React мог обновлять фактический DOM, не тратя много времени на прямые манипуляции с DOM.

Переход к ссылкам, поскольку мы не хотимдля доступа к элементу HTML с помощью document объект React предоставил ссылки, которые помогут получить доступ к конкретному элементу и быстро получить к нему доступ (он вернет данные из виртуального DOM).

Пара хорошихстатьи на ссылки:

и конечно

Кстати: добро пожаловать в чудесный мир React:)

0 голосов
/ 25 августа 2018

Доступ к DOM через переменную документа не рекомендуется в React.

Как вы сказали, вы должны создать ссылку для вашего элемента и получить к ней доступ через нее. (Подробнее о ссылках: https://reactjs.org/docs/refs-and-the-dom.html)

Краткий пример: 

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, до этого у вас был обратный вызов Refs - подробнее об этом в документации ...

...