时间戳

首页 > 解决方案 > 如何在 React 中处理输入类型 ='checkbox' 的签入？

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

问题描述

我有一组复选框，其中一些是预先检查的，一些将从用户那里更新。问题是复选框在初始渲染中渲染得很好，但点击时它们不会改变。'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]
    })
}

标签： javascripthtmlreactjs

解决方案

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

考虑以下带有工作代码框的示例：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 函数中，我们识别选中的项目，在数组中找到其对应的对象并切换该项目的选中状态。

推荐阅读