Question

我目前正在学习Reactjs，并希望做一个简单的Caeser-En / Decryption（转移字符）。

当文本输入正在改变时，它可以正常工作但似乎如果加密密钥正在改变（updateRot（）），CaeserShift函数会激发两次（甚至更频繁？）。

但我无法弄清楚我做错了什么。

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.updateRot = this.updateRot.bind(this);
    this.state = {value: 'abcdefghijklmnopqrstuvwxyz',
                  rot: 1
                 };
  }
  
  updateRot(e){
    this.setState({
      rot: e.target.value      
    });
  }
  
  handleChange(e){
    this.setState({
      value: e.target.value
      });
  }

caesarShift(str, amount){

	var output = '';
	// Go through each character
	for (var i = 0; i < str.length; i ++) {

		// Get the character we'll be appending
		var c = str[i];

		// If it's a letter...
		if (c.match(/[a-z]/i)) {

			// Get its code
			var code = str.charCodeAt(i);
			// Uppercase letters
			if ((code >= 65) && (code <= 90))
				c = String.fromCharCode(((code - 65 + amount) % 26) + 65);

			// Lowercase letters
			else if ((code >= 97) && (code <= 122))
				c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
     
		}
		// Append
		output += c;
	}
	// All done!
  return output
    
};

  render() {
    return (
      <div className="MarkdownEditor">
        <div className="Input">
        <h3>Input</h3>
        <textarea
          rows="2"
          onChange={this.handleChange}
          defaultValue={this.state.value}
          />
        </div>
      <div>
        <p>{this.state.rot}</p>
        
        <input className="quantity-input__screen" type="text" defaultValue={this.state.rot} onChange={this.updateRot} />
         
      </div>  
        <div className="Output">
        <h3>Output</h3>
        <textarea
          rows="2"
          className="content"
          value={this.caesarShift(this.state.value, this.state.rot)}
        />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<MarkdownEditor />, document.getElementById('app'));

.MarkdownEditor div{
  
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  display:block;
  
}
.MarkdownEditor div textarea{
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  display:block;
	width: 100%;
  overflow-y:auto;/*resets IE*/
  overflow-x:hidden;/*resets IE*/
}
.MarkdownEditor {
  padding-left: 25%;
  padding-right: 25%;
  
}

<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="app"></div>

修改得到了解决方案！ this.state.rot不是int！

...

  caesarShift(str, rot){

      var amount = parseInt(rot)||0;

...

Answer 1

如果你想通过道具将参数传递给一个函数，你应该将它包含在一个箭头函数中，否则你实际上是在调用函数。

在<label>ip:</label> <input class="ip_address" type="text" name="ip">内，您可以致电handleChange并将其传递给州。

即

caeserShift

然后您可以将此值存储在textarea

中

handleChange(e){ this.setState({ value: e.target.value, encrypted: this.caeserShift(e.target.value, this.state.rot) }); }

Reactjs函数触发两次？

1 个答案: