为什么我不能在React中选择单选按钮？

Question

我正在映射数据并创建表。在每个表格行上，都有一个单选按钮。我希望能够选择该按钮，它将为我提供该行中的所有数据，但是，我什至无法选择它。没用我在这里做什么错了？

我尝试添加一个值，一个onChange侦听器和一个checked属性，但是看起来我做错了什么。我知道您需要所有这些，但我不确定我在做什么错。

export default class ResultTable extends Component {
    state = {
        data: [
            {
                insightName: 'Name 1',
                description: 'name 1 desc',
                created: new Date(),
                createdBy: 'Person 1',
                category: 'insight 1',
                status: 'published'
            },
            {
                insightName: 'Name 2',
                description: 'name 2 desc',
                created: new Date(),
                createdBy: 'Person 2',
                category: 'insight 2',
                status: 'published'
            },
            {
                insightName: 'Name 3',
                description: 'name 3 desc',
                created: new Date(),
                createdBy: 'Person 3',
                category: 'insight 3',
                status: 'published'
            }
        ],
        selectedRow: ''
    }

    handleRadioButton = (e) => {
        e.persist()
        console.log('clicked', e)

         this.setState({
             selectedRow: e.target.value
         }, () => console.log(this.state.selectedRow))
    }

    render() {
        return (
            <div>
                <Table striped bordered hover>
                    <thead>
                        <tr>
                            <th> </th>
                            <th>Insight Name</th>
                            <th>Insight Description</th>
                            <th>Created</th>
                            <th>Created By</th>
                            <th>Category</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.data.map((obj, idx) => {
                                return (
                                    <tr onClick={this.selectRow}>
                                        <td>
                                            <div class="Form-group">
                                                <div class="Form-radio Form-radio--inline">
                                                    <input id="radio7" name="radioInline" type="radio" value={obj.insightName} checked={this.state.selectedRow === obj.insightName} onChange={this.handleRadioButton} />
                                                    <label for="radio7"></label>
                                                </div>
                                                <div />
                                            </div>
                                        </td>
                                        <td>{obj.insightName}</td>
                                        <td>{obj.description}</td>
                                        <td>{obj.created.toString()}</td>
                                        <td>{obj.createdBy}</td>
                                        <td>{obj.category}</td>
                                        <td>{obj.status}</td>
                                    </tr>)
                            })
                        }
                    </tbody>
                </Table>
            </div>
        )
    }
}

Answer 1

以下解决方案将起作用： Sandbox with working solution

  

请注意，JSX不等于HTML，因此在使用时：
  类应为className
  onclick应该被点击
  onchange应该是改变

您的错误也是这部分，下面是使用它的正确方法：

checked={state.selectedRow === obj.insightName ? "checked" : null }



import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const state = {
    data: [
      {
        insightName: "Name 1",
        description: "name 1 desc",
        created: new Date(),
        createdBy: "Person 1",
        category: "insight 1",
        status: "published"
      },
      {
        insightName: "Name 2",
        description: "name 2 desc",
        created: new Date(),
        createdBy: "Person 2",
        category: "insight 2",
        status: "published"
      },
      {
        insightName: "Name 3",
        description: "name 3 desc",
        created: new Date(),
        createdBy: "Person 3",
        category: "insight 3",
        status: "published"
      }
    ],
    selectedRow: ""
  };

  const handleRadioButton = e => {
    e.persist();
    console.log("clicked", e);

    this.setState(
      {
        selectedRow: e.target.value
      },
      () => console.log(this.state.selectedRow)
    );
  };

  return (
    <div className="App">
      <table clasName="striped bordered hover">
        <thead>
          <tr>
            <th> </th>
            <th>Insight Name</th>
            <th>Insight Description</th>
            <th>Created</th>
            <th>Created By</th>
            <th>Category</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {state.data.map((obj, idx) => {
            return (
              <tr click={state.selectedRow}>
                <td>
                  <div className="Form-group">
                    <div className="Form-radio Form-radio--inline">
                      <input
                        id={`radio${idx}`}
                        name="radioInline"
                        type="radio"
                        value={obj.insightName}
                        checked={
                          state.selectedRow === obj.insightName
                            ? "checked"
                            : null
                        }
                        change={handleRadioButton}
                      />
                      <label for="radio7" />
                    </div>
                    <div />
                  </div>
                </td>
                <td>{obj.insightName}</td>
                <td>{obj.description}</td>
                <td>{obj.created.toString()}</td>
                <td>{obj.createdBy}</td>
                <td>{obj.category}</td>
                <td>{obj.status}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

我认为它运行良好。我已经测试了您的代码。看一看。 https://codesandbox.io/s/modest-roentgen-ymcu8

如果遇到问题，则可以尝试删除e.persist()。可能会阻止您的代码设置新状态。