ループスルー反応状態を設定する

Question

私は10個の項目に状態を設定するために反応するイベントハンドラを持っていますが、これを繰り返すthis.stateで設定する最良の方法は何ですか？

handleOpacityThermatic(event) { 
    if (event == 0.1) { this.setState({ opacityValue: 0.1, opacityName: '10%' }); } 
    if (event == 0.2) { this.setState({ opacityValue: 0.2, opacityName: '20%' }); } 
    if (event == 0.3) { this.setState({ opacityValue: 0.3, opacityName: '30%' }); } 
    if (event == 0.4) { this.setState({ opacityValue: 0.4, opacityName: '40%' }); } 
    if (event == 0.5) { this.setState({ opacityValue: 0.5, opacityName: '50%' }); } 
    if (event == 0.6) { this.setState({ opacityValue: 0.6, opacityName: '60%' }); } 
    if (event == 0.7) { this.setState({ opacityValue: 0.7, opacityName: '70%' }); } 
    if (event == 0.8) { this.setState({ opacityValue: 0.8, opacityName: '80%' }); } 
    if (event == 0.9) { this.setState({ opacityValue: 0.9, opacityName: '90%' }); } 
    if (event == 1.0) { this.setState({ opacityValue: 1.0, opacityName: '100%' }); } 

}, 

for loop it？

for (let i = 1; i <= 10; i++) { 
} 

Answer 1

：event`のみ、これらの値のいずれかになります。

handleOpacityThermatic(event) { 
    const values = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]; 

    values.forEach((val) => { 
     if (event === val) { 
      this.setState({ 
       opacityValue: val, 
       opacityName: `${val * 10}%` 
      }) 
     } 
    }) 
} 

Answer 2

イベントの値を使用します。親切なリマインダー用&アンドリューリーをkjonssonする

const eventValues = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]; 

handleOpacityThermatic(event) { 
    if (eventValues.includes(Number(event)) { 
     this.setState({ opacityValue: event, opacityName: event*100 + '%' }); 
    } 
}, 

または文字列の補間と

handleOpacityThermatic(event) { 
    if (eventValues.includes(Number(event)) { 
    this.setState({ opacityValue: event, opacityName: `${event*100}%` }); 
    } 
}, 

---

感謝。たぶん、このような