Question

在todos数组上进行迭代。内部的对象具有isChecked属性。如果isChecked === true标记了该复选框，则isChecked === false的复选框是uncheckbox。当我单击复选框时。我无法标记或取消选中

此处演示：https://stackblitz.com/edit/react-ds9rsd

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [
        {
          name:'A',
          id: 1,
          isChecked: true      
        },
         {
          name:'B',
          id: 2,
          isChecked: false     
        },
         {
          name:'C',
          id: 3,
          isChecked: true      
        }
      ]
    };
  }

  checked = (e) => {
    console.log(e.target.checked)
  }

  render() {
    return (
      <div>
        {this.state.todos.map((todo, index) => {
          return <input type="checkbox" checked={todo.isChecked} onChange={(e) => this.checked(e)}/>
        })}   
      </div>
    );
  }
}

Answer 1

在checked（）函数中，您只是在记录值。取而代之的是，您需要执行setState（）来保存新状态。

Answer 2

您将需要添加一个函数并为每个复选框调用

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [
        {
          name: "A",
          id: 1,
          isChecked: true
        },
        {
          name: "B",
          id: 2,
          isChecked: false
        },
        {
          name: "C",
          id: 3,
          isChecked: true
        }
      ]
    };
  }

  checked = index => {
    /** get the current state */
    let _todos = this.state.todos;
    /** assign opposite value: true to false or false to true */
    _todos[index].isChecked = !_todos[index].isChecked;
    /** update state */
    this.setState({ todos: _todos });
  };

  render() {
    return (
      <div>
        {this.state.todos.map((todo, index) => {
          /** call the function passing the index value */
          return (
            <input
              label={todo.name}
              type="checkbox"
              checked={todo.isChecked}
              onChange={this.checked.bind(this, index)}
            />
          );
        })}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 3

可能的解决方案可能是像这样更新渲染功能：

render() {
  return (
    <div>
      {this.state.todos.map((todo, index) => {
        return <input label={todo.name} type="checkbox" checked={todo.isChecked} 
        onChange={(e) => this.checked(todo)}/>
      })}   
    </div>
  );
}

以及类似的检查方法：

checked = (e) => {
  this.setState(state => {
    const list = state.todos.map((item) => {
      if (item.name === e.name) {
        return item.isChecked = !item.isChecked;
      } else {
        return item;
      }
    });
    return {
      list,
    };
  });
}

单击后复选框不希望选中或取消选中

3 个答案: