Почему мой код не зашифрует письмо и не покажет его?

Question

Я пытаюсь поэкспериментировать с шифрованием и хотел бы начать с проверки того, как изменить одну букву, отправленную после нажатия кнопки, а также показать ее.

Например, при вводе пользователемa и, нажав кнопку, в браузере должно отобразиться x.

Что я делаю не так?

import React, { Component } from 'react';

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            show: false
        };

        this.encrypt = this.encrypt.bind(this);
    }

    encrypt = () => {
        let input = document.getElementById("inputText").value;

        this.setState({show: true});

        switch(input) {
            case "a":
                return "x";

            default:
                return null;
        }
    };

    render() {
        return(
            <div>
                <input type="text" placeholder="type something" id="inputText"/>
                <button onClick={() => this.encrypt}>Click to encrypt</button>
                {
                    this.state.show ? this.encrypt() : null
                }
            </div>
        );
    }
}

export default Main;

Answer 1

Было несколько неправильных вещей, поэтому позвольте мне пройтись по ним

• Вы использовали функцию стрелки и привязали ее к этому, ее или другая функция стрелки действует как лексический thisпривязав его к этому контексту
• вы вызывали setState во что-то, что вынуждает перерисовывать попадание в цикл перерисовки и сбой
• вы не вызывали encrpty на тот щелчок, который вы забыли ()

class Main extends React.Component {
  state = {
    input: null,
    view: ''
  };
  
  componentDidMount() {
    this.setState({input: document.getElementById("inputText")})
  }

  encrypt = () => {
    const { value } = this.state.input;

    switch (value) {
      case "a":
        return this.setState({view: "x"});
      case "b":
        return this.setState({view: "g"});
      default:
        return null;
    }
  };

  render() {
    return ( 
      <div>
         <input type = "text" placeholder = "type something" id = "inputText"/>

         <button onClick={this.encrypt}> Click to encrypt </button> 
 
         {this.state.view}
      </div>
    );
  }
}

ReactDOM.render(< Main/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

Answer 2

Я бы, наверное, написал ваш код таким образом.И это работает для меня.

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      encryptedValue: null
    };

  }

  encrypt = () => {
    let input = document.getElementById("inputText").value;

    let encryptedValue;
    switch (input) {
      case "a":
        encryptedValue = "x";
        break;
      default:
        encryptedValue = null;
    }

    this.setState({ show: true, encryptedValue: encryptedValue });
  };

  render() {
    return (
      <div>
        <input type="text" placeholder="type something" id="inputText" />
        <button onClick={() => this.encrypt()}>Click to encrypt</button>
        {this.state.encryptedValue}
      </div>
    );
  }
}
export default Main;

Я не хочу исправлять ваш код, поскольку у него так много недостатков.