Question

如何使用按钮map从onClick函数内部更改数组的值。在以下示例中，我定义并命名了具有三个对象的数组名称visitMyArray，最初，visited键的值设置为false。使用map函数，我将所有location渲染在paragraph标签内。每个button都会渲染一个paragraph。如果可以的话，是否可以将visited的值从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

Answer 1

您可以将地图上的每个项目的visited属性设置为true。您的onClick现在应该是

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

Answer 2

使用状态，可能看起来像这样：

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

Answer 3

您可以将onClick定义为：

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

我不知道您的用例，但是您不应该在render函数中定义'visitmyArray'。每次渲染组件时，都会重新定义它，因此您应该在其他位置定义它。例如，

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

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

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

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对其进行实际修改。

Answer 4

在let visitmyArray之后和return(之前添加：

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

和in按钮：

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

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

4 个答案: