javascript - 使用数组数据渲染时单选按钮无法正常工作

Question

我有一个 React 组件，它呈现一个带有输入字段和单选按钮的数组。输入字段工作正常，但是当单击单选按钮时，即使状态已更新，该值也不会反射(reflect)在 UI 中。

以下是React组件的实现

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [subTemplate, setSubTemplate] = useState([
    { name: 'main', outputFormat: 'html' },
    { name: 'something else', outputFormat: 'text' }
  ]);

  const handleInputChange = (value, row, key) => {
    const updatedSubTemplate = subTemplate.map(item => {
      if (item.name === row.name) {
        return {
          ...item,
          [key]: value
        };
      }
      return item;
    });
    console.log('updatedSubTemplate', updatedSubTemplate); // updatedSubTemplate consists of the modified value 
    setSubTemplate(updatedSubTemplate);
  };

  const renderSubTemplates = () => {
    return subTemplate.map((item, index) => {
      return (
        <div key={index}>
          <input
            type="text"
            value={item.name}
            onChange={e => {
              handleInputChange(e.target.value, item, 'name');
            }}
          />
          <div>
            <input
              type="radio"
              name="html"
              checked={item.outputFormat === 'html'}
              onChange={e => {
                handleInputChange(e.target.name, item, 'outputFormat');
              }}
            />
            HTML
          </div>
          <div>
            <input
              type="radio"
              name="text"
              checked={item.outputFormat === 'text'}
              onChange={e => {
                handleInputChange(e.target.name, item, 'outputFormat');
              }}
            />
            TEXT
          </div>
        </div>
      );
    });
  };
  return <div>{renderSubTemplates()}</div>;
}

以下是上述实现的 stackblitz 链接:https://stackblitz.com/edit/react-ugat24

注意:如果数组中只有 1 个元素，单选按钮将按预期工作。

Answer 1

这是因为您的 name 属性的值不同。

单选按钮用于从选项列表中选择一个选项。因此它们需要具有相同的名称才能对它们进行分组。

 <input
    type="radio"
    name={`group-${index}`}
    checked={item.outputFormat === 'html'}
    onChange={e => {
         handleInputChange('html', item, 'outputFormat');
    }}
  />

工作示例

https://stackblitz.com/edit/react-4xxpev