如何使用 React.js JavaScript 在 JSX 代码中实现数组递增函数答案

【问题标题】：How to implement an array increment function within JSX code using React.js JavaScript如何使用 React.js JavaScript 在 JSX 代码中实现数组递增函数
【发布时间】：2019-03-12 16:55:04
【问题描述】：

我正在尝试开发一个 React 程序，每次按下按钮“rectForward”或“rectBackward”时都会更改组件中的信息。我正在将对象数组形式的信息从“importData”传递到我的 Body 组件中，如下所示。然后通过调用render() 后直接列出的映射函数将该数据转换为每个对象的单独数据片段。当按下 rectForward 按钮时，我希望将 Column1 中的“text1”数组值增加 1。按下 rectBackward 时也会发生同样的情况，但我希望该值减少。我的主要困难是语法。正如您在声明onClick={Column1.text1=text1val[++] 中看到的，这是我第一次尝试实现此功能，但语法肯定不正确。我想知道是否可以帮助我格式化这个

import React from "react";
import "./Body.css";
import Column1 from "./Body/Column1/Column1";
import "./Buttons.css";
import Column2 from "./Body/Column2/Column2";
import myData from "./myData";

    class Body extends React.Component {
        constructor() {
            super()
            this.state = {
              importData: myData
            }
          }

        render() {

            var ID = this.state.importData.map(item => item.id)
            var text1val = this.state.importData.map(item => item.text1)
            var text2val = this.state.importData.map(item => item.text2)
            var text3val = this.state.importData.map(item => item.text3)

            return(
                <div className="mainBody">
                    <div className="backPain">
                        <div className="holder">
                        <Column1 key={ID[0]} text1={text1val[0]}>
                        </Column1>

                        <div className="rectHolder">
                            <div className="rectForward" onClick={Column1.text1=text1val[++]}
                                <h2>Next</h2>
                            </div>
                            <div className="rectBackward">
                                <h2>Prev</h2>
                            </div>
                        </div>

                        <Column2 key={ID[0]} text2={text2val[0]} text3={text3val[0]}>
                        </Column2>
                        </div>
                    </div>
                </div>
            )
        }
    }

    export default Body;

非常感谢！

【问题讨论】：

标签： javascript html reactjs onclick jsx

【解决方案1】：

我要做的简单的事情就是保持索引状态。比将函数传递给 next 和 prev 来处理更改此索引。并将根据当前状态显示值。

this.state = {
  currentIndex : 0
}

HandleCurrentIndex(type){
  if(type === 'inc'){
    this.setState({currentIndex: this.state.currentIndex++})
  } else {
   this.setState({currentIndex: this.state.currnIndex-1 })
  }
}

 <div className="rectForward" onClick={()=>this.HandleCurrentIndex("inc")}>
     <h2>Next</h2>
  </div>
 <div className="rectBackward" onClick={()=>this.HandleCurrentIndex('dec')}>
     <h2>Prev</h2>
 </div>

旁注：-这只是产品中的示例，您应该注意索引低于零以及超出数据限制的索引。这反过来将显示未定义的值。您应该做的简单事情是，只要超出限制，只需将其重置为默认值（0）

【讨论】：