2016-12-01 76 views
0

我有一个事件处理程序在响应设置10个项目的状态,什么是最好的方式来设置out out重复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循环吗?

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

如果'event'只能是其中的一个值,那么就没有必要循环。 –

回答

1

也许是这样的:

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}%` 
      }) 
     } 
    }) 
} 
3

使用事件的值。

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}%` }); 
    } 
}, 

感谢kjonsson &安德鲁李的那种提醒。

+1

您必须处理不属于这些值的情况。他可能不想设置状态。 – kjonsson

+0

数组(也可以是我们的一个Set)也可以在方法之外分配。每次调用方法时都不需要分配。 –

+0

不错,编辑;-) – lustoykov