javascript - 如何在 React 中处理已 checkin 的输入类型 ='checkbox'？

Question

我有一组复选框，其中一些是预先选中的，一些将由用户更新。问题是复选框在初始渲染中渲染得很好，但它们不会在点击时改变。 'checked' 的值在更改时更新 (onChange)

<input
   type = 'checkbox'
   style = {{margin : '0'}}
   checked = {this.state[elem]}
   value = {elem}
   onChange = {this.checked}
 /> {elem}

并在选中的方法中

checked = e => {
    this.setState({
        [e.target.value] : !this.state[e.target.value]
    })
}

Answer 1

您没有与我们分享您是如何生成这些输入的，但主要问题与对所有输入使用单一真实来源有关。您想要为每个输入(尤其是与该输入对应的对象)提供它们自己的检查状态。

考虑以下带有工作代码和框的示例:https://codesandbox.io/s/relaxed-feynman-1thb8

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const arr = [
  { val: "Cat", checked: false },
  { val: "Dog", checked: true },
  { val: "Turtle", checked: false }
];

class App extends React.Component {
  state = {
    arr: arr
  };

  handleCheck = e => {
    const arrCopy = [...this.state.arr];
    const itemToUpdate = arrCopy.find(item => item.val === e.target.value);

    itemToUpdate.checked = !itemToUpdate.checked;

    this.setState({
      arr: arrCopy
    });
  };

  createInputs = () => {
    const { arr } = this.state;

    return arr.map(elem => {
      return (
        <div>
          <input
            type="checkbox"
            style={{ margin: "0" }}
            checked={elem.checked}
            value={elem.val}
            onChange={this.handleCheck}
          />
          {elem.val}
        </div>
      );
    });
  };

  render() {
    return <div>{this.createInputs()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在上面的代码中，我们将您的状态数据组织为对象数组，使您更容易呈现标记并跟踪每个输入的选中状态。然后在 handleCheck 函数中，我们识别选中的项目，在数组中找到它对应的对象并切换该项目的选中状态。