根据 ReactJs 中的事件改变状态

Posted 2023-03-06

【中文标题】根据 ReactJs 中的事件改变状态

【英文标题】：Change the state according to event in ReactJs

【发布时间】：2021-05-28 13:31:06

【问题描述】：

我在 react js 应用程序中有下一个代码：

const items = [
  
    value: "A",
    label: "A"
  ,
  
    value: "B",
    label: "B"
  ,
  
    value: "C",
    label: "C"
  ,
  
    value: "D",
    label: "D"
  ,
  
    value: "E",
    label: "E"
  
];

const Test = () => 
  const [actives, setActives] = useState(["A", "C"]);

  function onChange(checkedValues) 
    console.log("checked = ", checkedValues);
    setActives(checkedValues);
  
  console.log(actives);

  return (
    <>
      <Form name="basic" initialValues= remember: true >
        <Form.Item
          label="Username"
          name="username"
          rules=[ required: true, message: "Please input your username!" ]
        >
          <Checkbox.Group
            style= width: "100%" 
            value=actives
            onChange=onChange
          >
            <Row>
              items.map((i) => 
                return (
                  <Col className=actives.includes(i.value) ? "active" : "">
                    <Checkbox value=i.value>i.label</Checkbox>
                  </Col>
                );
              )
            </Row>
          </Checkbox.Group>
        </Form.Item>
      </Form>
    </>
  );
;

这里我有一组复选框。根据单击的复选框，它应该显示为红色 -active 类。现在您可以看到默认情况下其中一些已被选中。 const [actives, setActives] = useState(["A", "C"]); 我想实现这个：

当用户选择另一个复选框而不是那些处于活动状态的复选框时，活动复选框不必像现在那样被禁用。如果用户点击已经激活的复选框，我们应该从该复选框中删除活动类。 最终用户应该能够为所有复选框添加一个活动类，但要考虑之前已经处于活动状态的复选框。

问题：如何做到这一点？ 我试图做这样的事情，但它不起作用：

function onChange(checkedValues) 
    console.log("checked = ", checkedValues);
    if (!actives.includes(checkedValues[length - 1])) 
      setActives(checkedValues.filter((i) => i !== checkedValues[length - 1]));
    
    setActives(checkedValues);
  

演示：https://codesandbox.io/s/use-with-grid-antd4123-forked-5kku2?file=/index.js:479-736

【问题讨论】：

您是否正在尝试一个复选框，其中您有一个选中所有选项和三个复选框

@DILEEP THOMAS，你是什么意思？我希望当我检查另一个默认情况下未选中的复选框时不会丢失默认复选框的活动状态，但是如果我将检查默认选中的复选框，则活动状态应该仅针对已选中的复选框消失。请告诉我是否不清楚。詹克斯

@DILEEPTHOMAS，你能帮忙吗？

所以默认情况下 A 和 C 有一个活动类但它们没有被选中，1）现在用户点击 B 是否需要活动类 2）当用户点击 A 复选框时如果应该删除活动类，或者应该发生什么。不是

@DILEEPTHOMAS，这两个默认被选中+处于活动状态。当点击 A 时，我们应该删除类并取消选择，但不应该取消选择 C，只有当用户点击 C

【参考方案1】：

您可以通过event.target.value 找到选中复选框的值。如果该值已经处于actives 状态，只需删除该值，否则将其添加到您的状态中。

在渲染时，根据actives 状态检查每个值以设置其checked 状态和活动类。

const  useState  = React;

const items = [ value: "A", label: "A" ,  value: "B", label: "B" ,  value: "C", label: "C" ,  value: "D", label: "D" ,  value: "E", label: "E"  ];

const Test = () => 
  const [actives, setActives] = useState(["A", "C"]);
  
  const onChange = (event) => 
    const checked = event.target.value;
    const other = actives.filter(active => active !== checked);
    if (actives.length === other.length) 
      setActives([...actives, checked]);
     else 
      setActives(other);
    
  

  return <div onChange=onChange>
  
    items.map((item) => 
      return  <div><input checked=actives.includes(item.value) type="checkbox" value=item.value name=item.label />
      <label className=actives.includes(item.value) ? 'active' : '' for=item.label>item.label</label></div>
    )
  
  </div>
;

ReactDOM.render(<Test />, document.getElementById("react"));

.active 
 color: #4CAF50;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【参考方案2】：

将function onChange(checkedValues) 更改为箭头函数。这应该可以正常工作。

【讨论】：

它没有帮助，如果我选择一个输入全部丢失active 状态，你检查了吗？