は、これは私のエラーの出発点である出力/状態/ DOM

Question

の変化を誘発し、中が反応状態へのリアルタイム演算を適用します。その数に乗算の数学演算を実行します - この場合はそれに0.2を掛けます - ただし、私のプログラムにはその操作を実行するのではなく、ひどいバグが含まれています - 単にテキストボックスの文字列に20を追加するだけです参照：

これは私が操作上のロジックを適用するために使用しようとしているコードですが、完全に妥当だと思われますが、私はJavaScriptの世界的な専門家でもReactでもありません。次のコードスニペットに何か間違っていますか？

addLogicToEquation(newLogic) { 
    let equation = this.state.equation 

    if(newLogic==="10%"){ 
    let newEquation = equation + (equation * 0.10) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="15%"){ 
    let newEquation = equation + (equation * 0.15) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="20%"){ 
    let newEquation = equation + (equation * 0.20) 
    this.setState({equation: newEquation}) 
    } 
    else{ 
    // we're adding more numbers 
    let newEquation = equation + newLogic 
    this.setState({equation: newEquation}) 
    } 
} 

おそらく、そのスニペットが合理的である、そして欠陥は私が実際に見て開始するために、complete codebaseはここで見つけることができる場所でもわからないんだけど、私のプログ内の別の場所で、それは本当に上で非常にvoluminous-何かではありません10ファイル程度のオーダー。

Answer 1

あなたはthis.state.equationから値を引くと、それは文字列を返します。数学演算を実行できるように数値に変換する必要があります。文字列を連結するjavascriptでは、+演算子が使用されるため、式を文字列連結として扱います。これを簡単に修正するには、初期割り当てを処理するときに、状態の式の値を数値に変換します。 let equation = Number(this.state.equation)。あなたは簡単にすることなく、割合のいずれかを変更するためにこれができるようになります

addLogicToEquation(newLogic) { 
    let equation = Number(this.state.equation); 
    let newEquation = equation; 

    if (newLogic.includes("%")) { 
    const percent = Number(newLogic.replace('%', ''))/100; 
    newEquation += (equation * percent); 
    } else { 
    newEquation += newLogic; 
    } 

    this.setState({ equation: newEquation }); 
} 

：

addLogicToEquation(newLogic) { 
    let equation = Number(this.state.equation) 

    if(newLogic==="10%"){ 
    let newEquation = equation + (equation * 0.10) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="15%"){ 
    let newEquation = equation + (equation * 0.15) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="20%"){ 
    let newEquation = equation + (equation * 0.20) 
    this.setState({equation: newEquation}) 
    } 
    else{ 
    // we're adding more numbers 
    let newEquation = equation + newLogic 
    this.setState({equation: newEquation}) 
    } 
} 

は、私はまた、次にそれをリファクタリングする勧告をしたいのですが：ここにあなたの完全なコードです変わっていくことに変わりはありません。それははるかに維持しやすいでしょう。

Answer 2

ここでnewLogicには、文字列"20"が含まれているとします。あなたは文字列に番号を追加する場合はJavaScriptで

は、両方の部分が文字列に変換し、連結されます。

var out = 100 + "20"; // "10020" 

明示的に、例えば、数に文字列を変換し、代わりに追加を強制するには+接頭辞を使用して：

var out = 100 + +"20"; // 120 

Answer 3

あなたが運転する前にfloatに、あなたの文字列をキャストする必要があります。もちろん

const string = "100"; 
const casted = parseFloat(string); 
const output = casted + (casted * 0.15); 

あなただけnewEquation =数（式を聞かせて `試し代わりに1.15を使用して、ほかに

const output = parseFloat("100") * 1.15;