Антон Спирин

часть информации в итоге забывается

а жизнь кажется хаотичной,

const letters = {
  'а': 'a',
  'б': 'b',
  'в': 'v',
  ...
};

state = {
  value: '',
  translitValue: '',
}

onChange = ({ target: { value } }) => {
  this.setState({
    value,
    translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
  });
}

<input value={this.state.value} onChange={this.onChange} />
<input value={this.state.translitValue} readOnly />

const items = [
  { title: 'London', content: 'London is the capital city of England.' },
  { title: 'Paris', content: 'Paris is the capital of France.' },
  { title: 'Tokyo', content: 'Tokyo is the capital of Japan.' },
];

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <p>{content}</p> 
  </div>
);

function Tabs({ items }) {
  const [ active, setActive ] = React.useState(null);

  const openTab = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
          >{n.title}</button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

class LoginFormComponent extends React.Component {
  handleSubmit = () => {
    console.log(this.model); // 123
  }

  componentDidMount() {
    this.model = 123;
  }

  render() {
    console.log(this.model); //123
    var styles = this.props.styles;

    return (
      <CM.MUI.FlatButton
        style={styles.buttonStyle}
        onClick={this.handleSubmit}
        label={CM.gettext("Login")}
      />
    );
  }
}

export default LoginFormComponent;