React - 更改使用 array.map() 渲染的 this.state onClick

JSx
class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: "Alice", active: false },
        { id: 2, name: "Bob", active: false },
        { id: 3, name: "Charlie", active: false }
      ]
    };
  }
  render() {
    return (
      <div>
        {this.state.data.map((user) => (
          <div key={user.id}>
            
{user.name}
          </div>
        ))}
      </div>
    );
  }
}

元素。注意，我们需要为每个生成的元素提供一个唯一的 key 属性，以帮助 React 进行高效的更新。

现在，我们已经成功地渲染了用户列表，接下来我们将学习如何在点击列表项时修改用户的状态。为了实现这个功能，我们需要在列表项上绑定一个点击事件，并在事件处理函数中修改对应用户的 active 状态。

JSx
class UserList extends React.Component {
  // ...
  handleClick(user) {
    const newData = this.state.data.map((item) => {
      if (item.id === user.id) {
        return { ...item, active: !item.active }; // 切换 active 状态
      }
      return item;
    });
    this.setState({ data: newData });
  }
  render() {
    return (
      <div>
        {this.state.data.map((user) => (
          <div key={user.id} onClick={() => this.handleClick(user)}>
            
{user.name}
            
{user.active ? "Active" : "Inactive"}
          </div>
        ))}
      </div>
    );
  }
}

在上述代码中，我们定义了一个名为 handleClick() 的方法，它接受一个用户对象作为参数。在方法内部，我们使用 array.map() 方法遍历 data 数组，并找到与传入的用户对象相匹配的项。当找到匹配项时，我们切换该项的 active 状态，并返回一个新的对象。最后，我们使用 setState() 方法更新组件的状态，从而触发重新渲染。

在 render() 方法中，我们为每个列表项添加了一个点击事件，并将对应的用户对象作为参数传递给 handleClick() 方法。当用户点击列表项时，handleClick() 方法会被调用，并根据点击的用户对象来修改状态。同时，我们还根据用户的 active 状态显示不同的文本内容，以便更直观地展示当前状态。

使用 onClick 修改 this.state 示例代码：

JSx
import React from "react";
class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: "Alice", active: false },
        { id: 2, name: "Bob", active: false },
        { id: 3, name: "Charlie", active: false }
      ]
    };
  }
  handleClick(user) {
    const newData = this.state.data.map((item) => {
      if (item.id === user.id) {
        return { ...item, active: !item.active };
      }
      return item;
    });
    this.setState({ data: newData });
  }
  render() {
    return (
      <div>
        {this.state.data.map((user) => (
          <div key={user.id} onClick={() => this.handleClick(user)}>
            
{user.name}
            
{user.active ? "Active" : "Inactive"}
          </div>
        ))}
      </div>
    );
  }
}
export default UserList;

通过使用 array.map() 方法渲染列表，并结合点击事件来修改对应的状态，我们可以实现交互性更强的页面。这种方式不仅简洁高效，而且还能提供良好的用户体验。在实际开发中，我们可以根据具体需求对代码进行进一步优化和扩展，以满足项目的要求。

，掌握了使用 array.map() 渲染并修改状态的技巧，我们可以更好地使用 React 构建动态的用户界面。希望本文对你有所帮助，让你能够在实际项目中灵活运用这些知识。