增加数组中的函数

Question

以下片段中的增量函数递增第四个元素,第五个元素,然后是最后一个元素(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>

Answer 1

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>