index.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import './style.css'

import React from 'react'
import ReactDOM from 'react-dom'

class IPAddress extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      octets: [10, 88, 135, 24],
      cidr: 36,
    }
  }

  handleChange = (event) => {
    var octets = this.state.octets
    var val = +event.target.value
    var octet = event.target.attributes['data-octet'].value
    if (octet == 'cidr') {
      this.setState({
        cidr: val
      })
    }
    else {
      octets[+octet] = val
      this.setState({
        octets: octets
      })
    }
  }

  render() {
    var pretty = this.state.octets.join('.') + '/' + this.state.cidr
    return <form>
      <input type="text" data-octet="0" onChange={this.handleChange} value={this.state.octets[0]}/>.
      <input type="text" data-octet="1" onChange={this.handleChange} value={this.state.octets[1]}/>.
      <input type="text" data-octet="2" onChange={this.handleChange} value={this.state.octets[2]}/>.
      <input type="text" data-octet="3" onChange={this.handleChange} value={this.state.octets[3]}/>/
      <input type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
      <h2>Result: {pretty}</h2>
    </form>
  }
}

const app = document.createElement('div')
document.body.appendChild(app)
ReactDOM.render(<IPAddress />, app)