funkcji Zwiększanie w tablicy

Question

zwiększa Funkcja przyrost w poniższym przykładzie czwartego elementu, piąty element, następnie ten ostatni element (20)

My celem jest to, aby zwiększyć każdej wartości liczbowej od czwartego elementu naprzód , pomijam litery.

Jest to linia, która mam problem z:

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

Jak mogę zmienić tego, aby osiągnąć swój cel?

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>

Answer 1

clicks był bardziej indeksie niż było to licznik kliknięć, więc przemianowano go index.

Można używać wyrażeń regularnych z String#split, dzięki czemu można połączyć .replace(/\ \ /g,' ').split(' ') w .split(/\s+/).

Przesunąłem instrukcję przyrostu indeksu do funkcji przyrostu dla uproszczenia i dodałem sprawdzenie, aby ponownie zwiększyć indeks, jeśli wartość nie jest liczbą.

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>