content: import React, { Component } from 'react';
  import ratio from 'cmnjs/number/ratio';
  
  import styles from './Ratio.module.scss';
  
  class Ratio extends Component {
  
    state = {
      a: 10,
      b: 20,
      c: 5,
      x: 10,
    };
  
    onChange = ({ target: { name, value } }) => {
      value = parseInt(value, 10);
      if (Number.isNaN(value)) {
        return;
      }
      const { a, b, c } = this.state;
      const temp = {
        a,
        b,
        c,
        [name]: value,
      };
  
      this.setState({
        [name]: value,
        x: ratio(temp.a, temp.b, temp.c),
      });
    };
  
    render() {
      const {
        a,
        b,
        c,
        x,
      } = this.state;
  
      return (
        <div className={styles.root}>
          <h1>
            Ratio
          </h1>
          <div>a - b</div>
          <div>c - x</div>
          <div>x = (b * c) / a</div>
          <br />
          <span>a:</span>
          <input name="a" value={a} type="number" onChange={this.onChange} />
          <span>-</span>
          <span>b:</span>
          <input name="b" value={b} type="number" onChange={this.onChange} />
          <br />
          <span>c:</span>
          <input name="c" value={c} type="number" onChange={this.onChange} />
          <span>-</span>
          <span>x:</span>
          <input name="x" value={x} type="text" readOnly />
        </div>
      );
    }
  
  }
  
  export default Ratio;
  