NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:11.2.2020 12:58

Ahoj,
chtěl bych docílit toho, že když uživatel klikne na určitý button, tak se spustí metoda a ta metoda by měla vytvořit lightbox, respektive appendnout div s formulářem k body.

Zkusil jsem:

const form = <OpenForm />
body.appendChild(form);

konkrétně se snažím dosáhnout tohoto, ale vyhazuje mi to neustále error, že "form" není "node". Nějaký nápad jak to udělat prosím? Jak konvertovat komponentu na DOM?

Děkuji za pomoc.

Editováno
 
Odpovědět
11.2.2020 12:58
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:11.2.2020 14:03

Neznam react. Znam js. Co jsi nasel googlem?

<div id="xxx"></div>
<input type="button" value="kilkni na mne vicekrat" onclick="aaa();">
<script>
function aaa()
{
var el;
el = document.getElementById('xxx');
el.innerHTML += 'a';
}
</script>

https://jsfiddle.net/sw32jgc9/
Vpravo dole, kdyz budes klikat na tlacitko, bude do tagu DIV pomoci metody innerHTML pridavat text.
Predpokladam, ze chces nejak podobne pracovat s tagy i ty.

google = react get tag element
https://stackoverflow.com/…eact-element

var Child = React.createClass({
  render: function() {
    return <div ref={function(el){this.props.whatElementAmI(el)}.bind(this)} >Oh My!</div>
  }
});

var Parent = React.createClass({
  whatElementAmI: function(el) {
    console.log(el.nodeName); // "DIV"
  },
  render: function() {
    return <div><Child whatElementAmI={this.whatElementAmI.bind(this)} /></div>
  }
});
 
Nahoru Odpovědět
11.2.2020 14:03
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:11.2.2020 14:04 
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  render() {
    return <span>Hello</span>;
  }
}

class Container extends React.Component {
  componentDidMount() {
    var domNode = ReactDOM.findDOMNode(this._component);
    console.log(domNode.tagName); // "DIV"
  }
  render() {
    return <MyComponent ref={(c) => this._component = c} />
  }
}
//na teze strance
 
Nahoru Odpovědět
11.2.2020 14:04
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:11.2.2020 14:32

Když používáš React nemáš vůbec důvod manuálně modifikovat DOM.
Správný způsob je ten, že na kliknutí se vyvolá update v dostatečně nadřazené komponentě a ten změní stav této komponenty. Při příštím renderu se podle stavu rozhodneš vyrenderovat svůj lightbox, prompt nebo formulář.

V tomhle případě se o to asi postará jedna z hlavních komponent aplikace.

Takže klíčová slova: onClick, setState...

PS: Reacti elementy nejsou typu DOM Node. Doporučuju začít v oficiální dokumentaci Reactu a projít si úplný základ - render a update a controlled a uncontrolled components.

Editováno
Nahoru Odpovědět
11.2.2020 14:32
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.