Javascript 单击事件时更改数组中对象的值

如何使用按钮

onClick

事件从

map

函数内部更改数组的值。在下面的示例中，我定义了一个数组名

visitMyArray

，它有三个对象，并且最初

visited

键的值设置为

false

。使用

map

函数，我呈现

段落

标记内的所有

位置

。将为每个

段落

呈现一个

按钮

。是否可以将已访问的

的值从
false
更改为
true
（如果可能）如何操作

import React from "react";
import {Button} from 'react-bootstrap';

class VisitComponent extends React.Component {

render(){
    let visitmyArray = [
        {
            location:"Indiana",
            visited:false
        },
        {
            location:"Illinoi",
            visited:false
        },
        {
            location:"Ohio",
            visited:false
        }
    ]
    return(
      <div>
        {visitmyArray.map((visitedArray, index) => {
             <div key={index}>
                <p>{visitedArray.location}</p>
                <Button onClick={"Change the visited value from 'false' to 'true' for this object value"}>Continue</Button>
             </div>
            )})}
      </div>
   }
}

export default VisitComponent

从“React”导入React；
从“react bootstrap”导入{Button}；
类VisitComponent扩展了React.Component{
render（）{
让visitmyArray=[
{
地点：“印第安纳”，
访问：错误
},
{
地点：“伊利诺伊”，
访问：错误
},
{
地点：“俄亥俄州”，
访问：错误
}
]
返回(
{visitmyArray.map（（visitedArray，index）=>{
{visitedArray.location}

继续
)})}
}
}
导出默认VisitComponent
在
之后让visitmyArray
和
之前返回（
添加：

markLocationAsVisited = (locationIndex) => {
  this.visitmyArray[locationIndex].visited = true
}

和“输入”按钮：

<Button onClick={() => markLocationAsVisited(index)}>

marklocationasvisted（index）}>
您可以为地图上的每个项目将
已访问的
属性设置为
true

onClick={() => {visitedArray.visited = true}}

使用state时，它可能会如下所示：

import React from "react";
import {Button} from 'react-bootstrap';

class VisitComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visitmyArray: [
                {
                    location:"Indiana",
                    visited:false
                },
                {
                    location:"Illinoi",
                    visited:false
                },
                {
                    location:"Ohio",
                    visited:false
                }
            ]
        };

        this.toggleVisited = this.toggleVisited.bind(this);
    }

    toggleVisited(location) {
        return ev => {
            var locations = this.state.visitmyArray.slice(0);
            var loc = locations.find(a => a.location === location);
            loc.visited = !loc.visited;
            this.setState({visitmyArray:locations})
        }
    }

    render(){
        let {visitmyArray} = this.state;
        return(
            <div>
                {visitmyArray.map((visitedArray, index) => (
                    <div key={index}>
                        <p>{visitedArray.location}</p>
                        <button className={visitedArray.visited ? "visited" : ""} onClick={this.toggleVisited(visitedArray.location)}>Continue</button>
                    </div>
                ))}
            </div>
        )
    }
}


export default VisitComponent

let visitmyArray = [
  {
    location:"Indiana",
    visited:false
  },
  {
    location:"Illinoi",
    visited:false
  },
  {
    location:"Ohio",
    visited:false
  }
]

class VisitComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      array: [...]
    }
  }

  render() {...}
}

从“React”导入React；
从“react bootstrap”导入{Button}；
类VisitComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
visitmyArray：[
{
地点：“印第安纳”，
访问：错误
},
{
地点：“伊利诺伊”，
访问：错误
},
{
地点：“俄亥俄州”，
访问：错误
}
]
};
this.togglevisted=this.togglevisted.bind（this）；
}
切换（位置）{
返回ev=>{
var locations=this.state.visitmyArray.slice（0）；
var loc=locations.find（a=>a.location==location）；
loc.visted=！loc.visted；
this.setState（{visitmyArray:locations}）
}
}
render（）{
让{visitmyArray}=this.state；
返回(
{visitmyArray.map（（visitedArray，index）=>(
{visitedArray.location}

继续
))}
)
}
}
导出默认VisitComponent
您可以将onClick定义为：

onClick = {() => {
    visitmyArray[index].visited = true
  }
}



我不知道您的用例，但您不应该在渲染函数中定义“visitmyArray”。每次组件渲染时，它都会被重新定义，因此您应该在其他地方定义它。例如

let visitmyArray = [
  {
    location:"Indiana",
    visited:false
  },
  {
    location:"Illinoi",
    visited:false
  },
  {
    location:"Ohio",
    visited:false
  }
]

class VisitComponent extends React.Component {
  render() {...}
}

如果要侦听对阵列所做的更改，应将其定义为组件状态的一部分，如下所示：

import React from "react";
import {Button} from 'react-bootstrap';

class VisitComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visitmyArray: [
                {
                    location:"Indiana",
                    visited:false
                },
                {
                    location:"Illinoi",
                    visited:false
                },
                {
                    location:"Ohio",
                    visited:false
                }
            ]
        };

        this.toggleVisited = this.toggleVisited.bind(this);
    }

    toggleVisited(location) {
        return ev => {
            var locations = this.state.visitmyArray.slice(0);
            var loc = locations.find(a => a.location === location);
            loc.visited = !loc.visited;
            this.setState({visitmyArray:locations})
        }
    }

    render(){
        let {visitmyArray} = this.state;
        return(
            <div>
                {visitmyArray.map((visitedArray, index) => (
                    <div key={index}>
                        <p>{visitedArray.location}</p>
                        <button className={visitedArray.visited ? "visited" : ""} onClick={this.toggleVisited(visitedArray.location)}>Continue</button>
                    </div>
                ))}
            </div>
        )
    }
}


export default VisitComponent

let visitmyArray = [
  {
    location:"Indiana",
    visited:false
  },
  {
    location:"Illinoi",
    visited:false
  },
  {
    location:"Ohio",
    visited:false
  }
]

class VisitComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      array: [...]
    }
  }

  render() {...}
}

您应该更改onClick以使用状态的数组创建新数组，然后使用setState实际修改它。
visitmyArray.map（（visitedArray，index）=>{
@TKoL visitmyArray不是国家的一部分here@LalasM但此处发生的任何事情似乎都不允许您在“visited”属性更改后显示该属性。确实要这样做吗？要更改数组中某个元素的属性，而无法在UI中显示该属性吗？这可能是因为您应该使用
state
。这就是为什么我首先提出了
setState
。在这种情况下，使用state将更容易直观地更新组件。如果是这种情况，则必须在
构造函数（）上将
visitmyArray
移动到
this.state
正如@TKoL所说。每次
渲染
，
visitmyArray
都将重置回其初始值。（如果我错了，请纠正我）。因此，即使我们更改了
visitmyArray
，更改也不会反映出来。您可以将数组移动到
this.state
，然后单击按钮，您可以对更新的数组执行
this.setState
。这是基本的反应模式。这使我无法定义“marklocationAsVisited”。以前我尝试过类似于是的，我们很接近OK。您正在更改数组。但是UI将不在sync@LalasM-它可能应该是
onClick={（）=>marklocationasvisted（index）}
，对不起。@Dupocas-？？？@pbialy我想我们不能在render中使用像这样的箭头函数-但不确定。我确定你可以，试试；）@LalasM虽然有语法问题，但要注意，你必须解决一些问题around@LalasM我更新了我的答案并进行了测试，这一个工作正常，没有语法错误。我以前定义button onclick函数的方式也不正确，现在它是对的