ReactJS 获取动态创建的单选按钮的值并将它们传递给状态（usestate）答案

【问题标题】：ReactJS get values of dynamically created Radio Buttons and pass them into state (usestate)ReactJS 获取动态创建的单选按钮的值并将它们传递给状态（usestate）
【发布时间】：2022-02-04 20:06:44
【问题描述】：

我的 ReactJS 应用程序有问题。我想获取选中单选按钮的值，并在选择后显示所选单选按钮的值。

表单是从 json 文件生成的

[
                    {
                        variantId: 1,
                        variantName: 'Size',
                        variantOptions: [ 
                            {
                                variantOptionId: 1,
                                variantOptionName: 'S',
                                variantOptionPriceChange: 4.5
                            },
                            {
                                variantOptionId: 2,
                                variantOptionName: 'M',
                                variantOptionPriceChange: 4.5
                            },
                        ] 
                    },
                    {
                        variantId: 2,
                        variantName: 'Color',
                        variantOptions: [ 
                            {
                                variantOptionId: 3,
                                variantOptionName: 'Red',
                                variantOptionPriceChange: 4.5
                            },
                            {
                                variantOptionId: 4,
                                variantOptionName: 'Blue',
                                variantOptionPriceChange: 4.5
                            },
                        ]  
                    }                        
                ]

问题的演示在这里可见：https://codesandbox.io/s/epic-http-bgmx3?file=/src/App.js

我想显示所有选定的项目，而不仅仅是最后一个。

问题出在这部分代码中，但我不知道如何重写它以实现所需的行为。

const addOption = (o) => {
    setOptions({
      optionId: o.variantOptionId,
      optionName: o.variantOptionName,
      optionPriceChange: o.variantOptionPriceChange
    });
  };

感谢您的帮助，希望我描述清楚。

【问题讨论】：

标签： javascript reactjs react-hooks radio-button use-state

【解决方案1】：

最简单的解决方案是在 useState 中为每个变体创建一个带有 props 键的对象，然后将该变体的选定选项存储在相关对象 prop 中

它应该像这样工作：

 export default function App() {
  const [options, setOptions] = useState({});
  const addOption = (name, o) => {
    setOptions({ ...options, [name]: o });
  };

  return (
    <div className="App">
      {variants.map((variant, index) => {
        return (
          <Variant
            options={options}
            variant={variant}
            addOption={addOption}
            key={index}
          />
        );
      })}

      <h3>
        Selected variants are:
        <ul>
          {Object.keys(options).map((name, i) => {
            return (
              <li key={i}>
                {name}: {options[name].variantOptionName}
              </li>
            );
          })}
        </ul>
      </h3>
    </div>
  );
}

【讨论】：