在阵列递增函数

在下面的代码段的增量函数递增所述第四元件，所述第五元件，则最后元件（20）在阵列递增函数

我的目标是为它从第四元件递增每个数字值起，跳过字母。

这是我有一个问题行：

const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;

我怎样才能改变这种实现我的目标是什么？

JSBin

let clicks = 0; 
 
class App extends React.Component { 
 
    state = { 
 
     data:'M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999 L 175 0' 
 
    }; 
 

 
    onClick() { 
 
     clicks ++; 
 
     this.setState({data: this.increment()}); 
 
    } 
 

 
    /** 
 
    * clicks -> Element index in array 
 
    * 1 ----- ->4, 
 
    * 2 ---- -> 5. 
 
    * 3 ---- -> 7. 
 

 
    * 4 ----- ->4, 
 
    * 5 ---- -> 5. 
 
    * 6 ---- -> 7. 
 
    */ 
 
    increment() { 
 
     const data = this.state.data.replace(/\ \ /g, " ").split(" "); 
 
     const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;    
 
     return data.map((e, i) => (i === indexAlteredElement(clicks%3)) ? parseInt(e)+5 : e).join(' ') 
 
    } 
 
    
 
    render() { 
 
     return (
 
     <div> 
 
      <div>{this.state.data} </div> 
 
      <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.querySelector('.container'));

<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> 
 
<section class="container"></section>

来源

2017-02-07 Koala7

clicks超过它是一个点击计数器索引的，所以我把它改名为index。

您可以使用正则表达式与String#split，因此您可以将.replace(/\ \ /g,' ').split(' ')合并为.split(/\s+/)。

为简单起见，我将索引增量语句移到了增量函数中，并添加了一个检查，如果该值不是数字，则会再次增加索引。

let index = 2; 
 
class App extends React.Component { 
 
    state = { 
 
     data: 'M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999 L 175 0' 
 
    }; 
 

 
    onClick() { 
 
     this.setState({data: this.increment()}); 
 
    } 
 

 
    increment() { 
 
     const data = this.state.data.split(/\s+/); 
 
     if(!(++index % 3)) ++index; 
 
     if(index % data.length < 3) index = index + (index % data.length) + 2; 
 
     return data.map((e, i) => i === index % data.length? parseInt(e) + 5 : e).join(' '); 
 
    } 
 
    
 
    render() { 
 
     return (
 
     <div> 
 
      <div>{this.state.data} </div> 
 
      <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.querySelector('.container'));

<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> 
 
<section class="container"></section>

来源

2017-02-11 07:37:11

在阵列递增函数

回答

相关问题