Reactjsファンクション機能は2回ですか？

Question

私は現在Reactjsを勉強しており、簡単なCaeser-En/Decryption（文字のシフト）を行いたいと考えています。

テキスト入力が変更されてもうまくいきますが、暗号化キーが変更されている（updateRot（））と、CaeserShift関数が2回（またはさらに頻繁に）起動するようです。

しかし、私は何が間違っているのか分かりません。

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){ 
 

 
\t var output = ''; 
 
\t // Go through each character 
 
\t for (var i = 0; i < str.length; i ++) { 
 

 
\t \t // Get the character we'll be appending 
 
\t \t var c = str[i]; 
 

 
\t \t // If it's a letter... 
 
\t \t if (c.match(/[a-z]/i)) { 
 

 
\t \t \t // Get its code 
 
\t \t \t var code = str.charCodeAt(i); 
 
\t \t \t // Uppercase letters 
 
\t \t \t if ((code >= 65) && (code <= 90)) 
 
\t \t \t \t c = String.fromCharCode(((code - 65 + amount) % 26) + 65); 
 

 
\t \t \t // Lowercase letters 
 
\t \t \t else if ((code >= 97) && (code <= 122)) 
 
\t \t \t \t c = String.fromCharCode(((code - 97 + amount) % 26) + 97); 
 
     
 
\t \t } 
 
\t \t // Append 
 
\t \t output += c; 
 
\t } 
 
\t // 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; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
    display:block; 
 
\t 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>

EDIT： ソリューションを手に入れました！ this.state.rotはintではありません！

...

caesarShift(str, rot){ 

     var amount = parseInt(rot)||0; 

...

Answer 1

あなたが小道具を通じて関数にパラメータを渡したい場合は、そうでない場合は、あなたが、本質的に関数を呼び出している矢印の機能で囲む必要があります。

handleChangeの中には、caeserShiftと呼び出して州に渡すことができます。

handleChange(e){ 

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

すなわち

その後、あなたはそう、あなたが暗号化キーを更新しているときはいつでも、あなたは状態を設定onChangeイベントを、持っているテキストエリアに

value={this.state.encrypted}