为什么我的代码不会加密一个字母并显示它？

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

我可能会这样写你的代码。它对我有用。

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;

我不想纠正您的代码，因为它有很多缺点。

Answer 2

有很多事情出错，所以让我来看看

• 您正在使用一个箭头函数并将其绑定到此，它的一个或另一个箭头函数的作用类似于词法，将其绑定到该上下文
• 您正在调用 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>