反应自定义复选框输入组件不重新渲染答案

【问题标题】：React custom checkbox input component not rerendering反应自定义复选框输入组件不重新渲染
【发布时间】：2021-08-01 00:59:01
【问题描述】：

我将我的复选框输入提取到单独的自定义组件中，以便以后可以轻松地重用它。但是，每当父级的状态发生变化时，这个自定义组件中的检查值就不会改变。当我首先移动页面并稍后打开它但不是实时时，它实际上正在改变。但是当我使用默认输入组件时，它会实时工作。知道这怎么可能吗？

import React from 'react';

const Checkbox = ({ name, id, className, onValueChange, defaultChecked = false }) => {
  let classes = 'checkbox';

  if (className) {
    classes += ` ${className}`;
  }

  const valueChangeHandler = (event) => {
    if (onValueChange) {
      onValueChange(event.target.checked);
    }
  };

  return (
    <input 
      type="checkbox"
      name={ name }
      id={ id }
      className={ classes }
      defaultChecked={ defaultChecked }
      onChange={ valueChangeHandler }
    />
  );
};

export default Checkbox;

【问题讨论】：

您可以尝试在输入时使用checked 而不是defaultChecked 吗？
我试过了。当我使用checked时，我不能改变输入，也不会触发onChange事件。
在调用父级的onValueChange 时，您是否检查过defaultChecked 属性是否正在更新？
我正在使用 redux 作为状态。我已经用 console.log 多次检查了状态，它正在改变，但复选框自定义组件没有实时改变。

标签： javascript reactjs checkbox

【解决方案1】：

我建议阅读 controlled components 周围的 React 文档，以及更适用于您的代码的 uncontrolled components。

理想情况下，您希望使用受控组件，该组件通常由 value 和 onValueChanged 属性或类似属性组成：

const Checkbox = ({ name, id, className, value, onValueChange }) => {
  const valueChangeHandler = (event) => {
    if (onValueChange) onValueChange(event.target.checked);
  };

  return (
    <input
      type="checkbox"
      name={name}
      id={id}
      checked={!!value}
      className={className ? `checkbox ${className}` : 'checkbox'}
      onChange={valueChangeHandler}
    />
  );
};

然后你会像这样使用它：

function SomeComponent() {
    const defaultValue = true;
    const [checked, setChecked] = React.useState(defaultValue);

    return <div>
        <Checkbox
            value={checked}
            onValueChange={setChecked}
            ...
        />
    </div>;
}

基本上，如果您希望从父级更改复选框的值，您需要一个受控组件，您可以在其中告诉您的复选框应该是什么值。在这里，我们只需使用React.useState 来跟踪值，它可以方便地接受默认值。您可以将useState 替换为例如一个基于 redux 的 getter/setter。

【讨论】：

嘿。感谢你的回答。这种方法对我有用：D。看起来我仍然无法区分 check 和 defaultChecked 的行为。
defaultChecked 基本上说“当第一次创建这个<input> 元素时，是否（取消）选中它”但你的问题是你改变了值，我假设你通过@987654331 @，但 <input> 已经渲染。现在，如果您使用受控组件，例如value，那么复选框值将始终如您所说的那样。 React 推荐受控组件是有原因的。

【解决方案2】：

输入 'defaultChecked' 仅在第一次（加载时）设置，因此在值更改时不会更改。您应该将新值传递给 'checked' 属性，所以试试这个：

import React from 'react';

const Checkbox = ({ name, id, className, onValueChange, defaultChecked = false }) => {
  let classes = 'checkbox';

  if (className) {
    classes += ` ${className}`;
  }

  const valueChangeHandler = (event) => {
    if (onValueChange) {
      onValueChange(event.target.checked);
    }
  };

  return (
    <input 
      type="checkbox"
      name={ name }
      id={ id }
      className={ classes }
      defaultChecked={ defaultChecked }
      checked={defaultChecked}
      onChange={ valueChangeHandler }
    />
  );
};

export default Checkbox;

【讨论】：

感谢您的回答。是的，我的问题是使用 defaultChecked insted of checked。我仍然无法区分defaultChecked 和checked。真的很感激：D