如何在反应表组件的单元格中添加单选按钮？

Question

我是使用 React 和 TypeScript 进行编程的新手，目前我正在尝试在 React 表行单元格内添加两个单选按钮。

以下是我的目标。

从上面可以看出，我想在单选按钮列下的每一行添加两个单选按钮，即按钮1和按钮2。仅当用户选择该行时才会显示这些单选按钮。默认情况下应该选择button1。

选择button2时，我们需要将所选行的id添加到数组中。例如，如果我们选择第一行的 id 为“1”的 Button2，则数组应包含 ['1']。那么如果用户选择 id '2' 的第二行，则数组应包含 ['1','2']。现在，如果用户取消选择button2并选择第二行的id为'2'的button1，则数组应包含['1']。

我已经尝试过以下解决方案来做到这一点，

CustomRadioButtonComponent.tsx

const CustomRadioButtonComponent: React.FC<SomeProps> = ({
    id,
    info,
    onBlur,
    onRadioButton1Change,
    onRadioButton2Change,
}) => {
    const handleRadioButton1Change: React.ChangeEventHandler<HTMLInputElement> =
        React.useCallback((event: any) => onRadioButton1Change(),
        [id, onRadioButton1Change]
    );

    const handleRadioButton2Change: React.ChangeEventHandler<HTMLInputElement> =
        React.useCallback((event: any) => {
            onRadioButton2Change(id, event.target.checked);
        }, [id, onRadioButton2Change]
    );
    return (
        <Flex flex={1}>
            <RadioButton
                name="radio"
                id="btn1"
                label="button1"
                onChange={handleRadioButton1Change}
                onBlur={onBlur}
                checked={info.length === 0}
         />
         <RadioButton
             name="radio"
             id="btn2"
             label="button2"
             checked={info.length > 0}
             onChange={handleRadioButton2Change}
             onBlur={onBlur}
         />
     </Flex>
 );

};

main.tsx

const mainStep: React.FC<MainStepProps> = props => {
    const info = values[INFO_KEY]; // form field value where we store the ids of 
    //selected rows

    
    const handleRadioButton1Change = React.useCallback(() => {
        setFieldValue(INFO_KEY, []); // WRONG LOGIC
    }, [setFieldValue]);

    const handleRadioButton2Change = React.useCallback(
        (id: any, state: any) => { // WRONG LOGIC
            const actualId = allInfoMap[id] ?? id;
            const infoAfterChange = state
                ? [...info, actualId]
                : info.filter(item => item !== actualId);
            setFieldValue(INFO_KEY, infoAfterChange);
     }, [info, setFieldValue, allInfoMap]
 );


    const columns: Column<Data>[] = [
        {
            Header: 'Name',
            id: 'name' ,
        } as ColumnWithId<Data>,x
        {
            Header: 'Radio buttons',
            id: 'radioButtons',
            accessor: ({ id, handleButton1Change, handleButton2Change, info, onBlur}) 
                => ({
                       id,
                       handleButton1Change,
                       handleButton2Change,
                       info,
                       onBlur,
                   }),
            Cell: ({
                      value: {
                          id,
                          handleButton1Change,
                          handleButton2Change,
                          info,
                          onBlur,
                      },
                      row: { selectState },
                  }) => {
                      if (selectState === 1) {
                          return (
                              <CustomRadioButtonComponent
                                  info = {info}
                                  onBlur={onBlur}
                                  id={id}
                                  onRadioButton1Change={handleRadioButton1Change}
                                  onRadioButton2Change={handleRadioButton2Change}
                               />
                           }
                       } as any,
                       {
                           Header: 'Version',
                           // version logic
                       },
                   ];
                 

    const tableData = React.useMemo(() =>
        data.map(item => {
            return {
                ...item,
                handleButton1Change(),
                handleButton2Change(),
                info,
            };
        }),[data, handleButton1Change, handleButton2Change, info];
    return (
        <Table<Data>
            data={tableData}
            columns={columns}
        />
    );
}

上面代码的问题在于，如果我选择第 1 行上的按钮 2，然后选择第 2 行上的按钮 2，然后取消选择第 1 行上的按钮 2，则它不会选择正确的单选按钮。

默认情况下，按钮 1 也未被选中。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

对于第一个问题，选择一行中的button2会取消选择另一行中的button2，您需要为每行中的每个单选输入指定相同的名称。该名称应与其他行中无线电输入的名称不同。

例如，第一行可能是这样的：

<Row1>
  <RadioButton
    name="name1"
    {...otherProps}
  />
  <RadioButton
    name="name1"
    {...otherProps}
  />
</Row1>

第二排

<Row2>
  <RadioButton
    name="name2"
    {...otherProps}
  />
  <RadioButton
    name="name2"
    {...otherProps}
  />
</Row2>

等等...

此外，要使第一个单选按钮在第一次渲染期间始终处于选中状态，可以使用defaultChecked属性：

<RadioButton
  name="name1"
  defaultChecked
  {...otherProps}
/>