这里只是一个想法:当涉及到React中的无线电输入时，我通常以一种不同的方式渲染它们，这在前面的回答中提到过。

如果这可以帮助任何需要渲染大量单选按钮的人:

import React from "react" import ReactDOM from "react-dom" // This Component should obviously be a class if you want it to work ;) const RadioInputs = (props) => { /* [[Label, associated value], ...] */ const inputs = [["Male", "M"], ["Female", "F"], ["Other", "O"]] return ( <div> { inputs.map(([text, value], i) => ( <div key={ i }> <input type="radio" checked={ this.state.gender === value } onChange={ /* You'll need an event function here */ } value={ value } /> { text } </div> )) } </div> ) } ReactDOM.render( <RadioInputs />, document.getElementById("root") ) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

单击单选按钮应该触发一个事件，其中之一:

如果只希望选择知识是本地的，则调用setState 调用一个从上面传入的回调函数self.props.selectionChanged(…)

在第一种情况下，改变状态将触发重新渲染，你可以这样做 <td>所选站点名称{this.state. name。chosenSiteName} < / td >

在第二种情况下，回调的源将更新内容，以确保您的SearchResult实例将有chosenSiteName和chosenAddress设置在它的props中。

任何对渲染的改变都应该通过状态或道具(react doc)来改变。

所以这里我注册了输入的事件，然后改变状态，这将触发渲染显示在页脚上。

var SearchResult = React.createClass({
  getInitialState: function () {
    return {
      site: '',
      address: '',
    };
  },
  onSiteChanged: function (e) {
    this.setState({
      site: e.currentTarget.value,
    });
  },

  onAddressChanged: function (e) {
    this.setState({
      address: e.currentTarget.value,
    });
  },

  render: function () {
    var resultRows = this.props.data.map(function (result) {
      return (
        <tbody>
          <tr>
            <td>
              <input
                type="radio"
                name="site_name"
                value={result.SITE_NAME}
                checked={this.state.site === result.SITE_NAME}
                onChange={this.onSiteChanged}
              />
              {result.SITE_NAME}
            </td>
            <td>
              <input
                type="radio"
                name="address"
                value={result.ADDRESS}
                checked={this.state.address === result.ADDRESS}
                onChange={this.onAddressChanged}
              />
              {result.ADDRESS}
            </td>
          </tr>
        </tbody>
      );
    }, this);
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
          </tr>
        </thead>
        {resultRows}
        <tfoot>
          <tr>
            <td>chosen site name {this.state.site} </td>
            <td>chosen address {this.state.address} </td>
          </tr>
        </tfoot>
      </table>
    );
  },
});

jsbin

我也搞混了无线电，复选框的实现。我们需要的是，监听收音机的变化事件，然后设置状态。我举了一个性别选择的小例子。

/* * A simple React component */ class App extends React.Component { constructor(params) { super(params) // initial gender state set from props this.state = { gender: this.props.gender } this.setGender = this.setGender.bind(this) } setGender(e) { this.setState({ gender: e.target.value }) } render() { const {gender} = this.state return <div> Gender: <div> <input type="radio" checked={gender == "male"} onClick={this.setGender} value="male" /> Male <input type="radio" checked={gender == "female"} onClick={this.setGender} value="female" /> Female </div> { "Select Gender: " } {gender} </div>; } } /* * Render the above component into the div#app */ ReactDOM.render(<App gender="male" />, document.getElementById('app')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>

import React from 'react';
import './style.css';

export default function App() {
  const [currentRadioValue, setCurrentValue] = React.useState('on');
  const handleRadioChange = value => {
    setCurrentValue(value);
  };
  return (
    <div>
      <>
        <div>
          <input
            name="radio-item-1"
            value="on"
            type="radio"
            onChange={e => setCurrentValue(e.target.value)}
            defaultChecked={currentRadioValue === 'on'}
          />
          <label htmlFor="radio-item-1">Radio Item 1</label>
          {currentRadioValue === 'on' && <div>one</div>}
        </div>
        <div>
          <input
            name="radio-item-1"
            value="off"
            type="radio"
            onChange={e => setCurrentValue(e.target.value)}
            defaultChecked={currentRadioValue === 'off'}
          />
          <label htmlFor="radio-item-2">Radio Item 2</label>
          {currentRadioValue === 'off' && <div>two</div>}
        </div>
      </>
    </div>
  );
}

工作示例:https://stackblitz.com/edit/react-ovnv2b

这是我用过的。希望这能有所帮助。 首先定义变量。

const [variableName, setVariableName] = useState("");

然后，我们将需要实际的单选按钮。

<input
   type="radio"
   name="variableName"
   value="variableToCheck"
   onChange={(e) =>
   setVariableName("variableToCheck")
   }
   checked={variableName === "variableToCheck"}
/>