javascript - 使用 React-Window 时单选按钮忘记其状态时遇到问题

Question

到目前为止，我已经遵循了几个使用 react-table 和 react-window 的示例，但是我需要该表具有选择框来选择单个或分组的行以及一个类似单选的按钮，以便能够切换信息一行，我设法实现了这一点，但是当我向上或向下滚动时，选定的单选按钮会失去其选定状态，如下所示

正如您所看到的，当我选择一行时，它的 ID 显示在表格下方，但是当我滚动并将该行移离视图时，单选按钮将失去其选中状态。

我有一个代码示例here

Answer 1

首先，您必须更新RadioCheckbox组件

const RadioCheckbox = ({ cell, checked, handleChange }) => {
  return (
    <input
      type="radio"
      onChange={handleChange}
      value={cell.row.id}
      checked={checked}
    />
  );
};

然后，您必须添加一个函数来处理您在App组件中的更改并更改您的selectedRadio的默认状态

const [selectedRadio, setSelectedRadio] = useState([]);

const handleSelectedRadioChange = ({ currentTarget }) => {
    if (selectedRadio.includes(currentTarget.value)) {
      setSelectedRadio(
        selectedRadio.filter((item) => item === currentTarget.value)
      );
    } else {
      setSelectedRadio(currentTarget.value);
    }
 }; 

最后一步使用[selectedRadio]在 App 中更新你的列 useMemo 的依赖关系，你必须更新你的Cell渲染

const columns = React.useMemo(
    () => [
      {
        id: "radio",
        Header: "on/off",
        Cell: (props) =>
          notAllowedRows.includes(props.cell.row.index) ? null : (
            <div>
              <RadioCheckbox
                cell={props.cell}
                checked={selectedRadio.includes(props.cell.row.id)}
                handleChange={handleSelectedRadioChange}
              />
            </div>
          ),
        width: 60
      },
      {
        Header: "Row Index",
        accessor: (row, i) => i,
        width: 95
      },
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Last Name",
        accessor: "lastName"
      },
      {
        Header: "Age",
        accessor: "age",
        width: 50
      },
      {
        Header: "Visits",
        accessor: "visits",
        width: 60
      }
    ],
    [selectedRadio]
  );