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

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;

javascript reactjs debugging encryption

0

sp92 23 Окт 2018 в 20:06

Answer 1

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

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;

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

2

vijay krishna 24 Окт 2018 в 01:30

Answer 2

Было довольно много ошибок, поэтому позвольте мне пройти через них

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

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>

0

Joe Warner 23 Окт 2018 в 18:08

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

2 ответа

Новые вопросы

javascript