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

Question

到目前为止，我已经使用 react-table 和 react-window 关注了几个 examples，但我需要 table select 框到 select 单个或分组的行以及一个类似单选按钮的按钮，以便能够切换一行的信息，我设法实现了这一点，但是当我向上或向下滚动时 select ed 单选按钮失去其 selected 状态，如下所示

如您所见，当我 select 一行时，其 ID 显示在 table 下方，但是当我滚动并将该行移离视图时，单选按钮会失去其选中状态。

我有代码示例here

Answer 1

首先，您必须更新 RadioCheckbox 组件

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

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

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]
  );

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

Having trouble with radio buttons forgetting its state when using React-Window

javascript

reactjs

react-table

react-window