在 react js 中使用 map 生成的单选按钮设置值

Question

我正在尝试：

1. 在 react 中使用 Map 从常量数组​​生成单选按钮
2. 让用户选择一个并使用 handleChange() 设置状态

使用以下代码，我能够实现 1，但由于某种原因，当我尝试使用 handleChange() 显示时，我看到它是一个空字符串。

你能帮帮我吗？

谢谢

import React, { Component } from "react";

const members = ["Araki", "Ibata", "Fukutome", "Woods", "Alex", "Tatsunami"];

export default class MyRadio extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lastName: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    console.log("handleChange() e:" + e.target.value);

    this.setState({
      [e.target.name]: e.target.value,
    });
  }
 

  render() {
    console.log("render");
    return (
      <form>
        <div>
          {members.map((item) => (
            <React.Fragment>
              <label htmlFor={item.name}> {item}</label>
              <input
                name="lastName"
                key={item.name}
                id={item.name}
                value={item.name}
                type="radio"
                onChange={this.handleChange}
              />
            </React.Fragment>
          ))}
        </div>
        <div></div>
      </form>
    );
  }
}

Answer 1

要使这个可行的解决方案你必须改变成员如下

const members = [{name: "Araki", name: "Ibata", ...}];

array 应该是一个对象数组，每个对象都有 name 属性，因为在 ma​​p 你期望 name 应该是 item.name。

或者您必须在没有item.name 的情况下更改循环，您必须使用item

{members.map((item) => (
    <React.Fragment>
          <label htmlFor={item}> {item}</label>
          <input
            name="lastName"
            key={item}
            id={item}
            value={item}
            type="radio"
            onChange={this.handleChange}
          />
    </React.Fragment>
))}