时间戳

首页 > 解决方案 > 反应自定义复选框输入组件不重新渲染

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

问题描述

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

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;

标签： javascriptreactjscheckbox

解决方案

我建议阅读 React 关于受控组件的文档，更适用于您的代码的不受控组件。

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

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。

推荐阅读