linkDOM Inputs & Events

linkEvents

You can simply provide event handler functions to elements:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2link

3linkconst renderer = new CommonDOMRenderer();

4linkrenderer.render(

5link  <button onclick={() => alert('Hi!')}>Say Hellow</button>

6link).on(document.body);

Your handler function will also be provided with the event object:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2linkimport { ref } from 'render-jsx/common';

3link

4linkconst renderer = new CommonDOMRenderer();

5linkconst display = ref();

6link

7linkrenderer.render(

8link  <div style={`

9link    height: 100vh; display: flex;

10link    justify-content: center;

11link    align-items: center;

12link  `}

13link   onmousemove={e => {

14link     display.$.textContent = `${e.clientX}, ${e.clientY}`

15link   }}>

16link    <div _ref={display}/>

17link  </div>

18link).on(document.body);

linkInputs

You can capture input values using _state property:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2linkimport { ref } from 'render-jsx/common';

3link

4linkconst renderer = new CommonDOMRenderer();

5linklet text = '';

6linkconst small = ref();

7link

8linkrenderer.render(<div>

9link  <input _state={t => text = small.$.textContent = t} type='text'/>

10link  <button onclick={() => alert(text)}>REPEAT!</button>

11link  <br/>

12link  <small _ref={small}/>

13link</div>).on(document.body);

You can also use _value property on <option>s (in <select>) to attach JavaScript values to each option, which is fetched via _state property on the corresponding <select>:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2linkimport { ref } from 'render-jsx/common';

3link

4linkconst renderer = new CommonDOMRenderer();

5linkconst display = ref();

6link

7linkrenderer.render(<div>

8link  <div _ref={display}/>

9link  <select _state={p => display.$.textContent = p.name}>

10link    <option _value={{name: 'Eugene'}}>First Guy</option>

11link    <option _value={{name: 'Tim'}}>Second Guy</option>

12link  </select>

13link</div>).on(document.body);