Class: Component

import createComponent, {
 Component
} from 'arco';

// can still create your lifecycle methods as external methods
const componentDidUpdate = function(props) {
 console.log('Updated with props: ', props);
 console.log('Updated with state: ', this.state); // state accessed through this
};

class Foo extends Component {
 state = {
   foo: null
 };

 onClickButton = () => {
   this.setState({
     foo:  'bar'
   });
 };

 render(props) {
   return (
     <button
       onClick={this.onClickButton}
       type="button"
     >
       Click me
     </button>
   );
 }
}

Extends

• React.Component

Methods

---

getDOMNode( [selector])

if the selector is passed, query the component to find the matching DOM element, else return the DOM element of the component itself

Parameters:

Name	Type	Argument	Description
selector	string	<optional>	CSS selector to query component for

Source:

• Component.js, line 65

Returns:

Type

HTMLElement

Example

import createComponent, {
 Component
} from 'arco';

// function instead of arrow function to retain the "this"
const componentDidMount = function() {
  const div = this.getDOMNode(); // gets the top-level div node
  const input = this.getDOMNode('.input'); // gets the input child node
};

class Foo extends Component {   *
 render() {
   return (
     <div>
       <input
         className="input"
         type="text"
       />
       </div>
   );
 }
}

export default createComponent(Foo, {
 componentDidMount
});