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

【问题标题】：Radio button not working correctly when rendered using array Data使用数组数据渲染时单选按钮无法正常工作
【发布时间】：2021-10-31 13:36:19
【问题描述】：

我有一个 React 组件，它呈现一个带有输入字段和单选按钮的数组。输入字段工作正常，但当单击单选按钮时，即使状态已更新，该值也不会反映在 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 个元素，则单选按钮会按预期工作。

【问题讨论】：

标签： javascript reactjs radio-button

【解决方案1】：

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

单选按钮用于从选项列表中选择一个选项。所以他们需要有相同的name 来分组。

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

工作示例

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

【讨论】：

【解决方案2】：

您的代码中有 2 个问题。

您正在为所有无线电输入传递相同的name 属性。
您为无线电元素传递了错误的value。

使用模板文字将index 值附加到数组中的每组单选组元素。

这里是working code

参考文献

【讨论】：