Fonction d'incrémentation dans un tableau
La fonction increment dans l'extrait suivant incrémente le quatrième élément, le cinquième élément, puis le dernier élément (20)
mon but est qu'il augmente chaque valeur numérique à partir du quatrième élément, en sautant les lettres.
C'est la ligne que je vais avoir un problème avec:
const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;
Comment puis-je modifier cela pour atteindre mon objectif?
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>1 réponses
clicks était plus un index qu'un compteur de clics, donc je l'ai renommé en index.
Vous pouvez utiliser des expressions régulières String#split, de sorte que vous pouvez combiner .replace(/\ \ /g,' ').split(' ') en .split(/\s+/).
j'ai déplacé l'énoncé d'incrément dans la fonction d'incrément pour plus de simplicité, et j'ai ajouté une vérification pour incrémenter l'indice de nouveau si la valeur n'est pas un nombre.
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>