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

Question

我正在努力：

1. 使用React中的映射从常量数组生成单选按钮
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", ...}];

数组应该是一个对象数组，每个对象都有name属性，因为在映射中，您所期望的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>
))}