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

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

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

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

这里只是一个想法:当涉及到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>

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

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

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

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

根据陈康的回答，我有一个更干练的方法给感兴趣的人:

class RadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedRadio: 'public'
    };
  }

  handleRadioChange = (event) => {
    this.setState({
      selectedRadio: event.currentTarget.value
    })
  };

  render() {
    return (
      <div className="radio-row">
        <div className="input-row">
          <input
            type="radio"
            name="public"
            value="public"
            checked={this.state.selectedRadio === 'public'}
            onChange={this.handleRadioChange}
          />
          <label htmlFor="public">Public</label>
        </div>
        <div className="input-row">
          <input
            type="radio"
            name="private"
            value="private"
            checked={this.state.selectedRadio === 'private'}
            onChange={this.handleRadioChange}
          />
          <label htmlFor="private">Private</label>
        </div>
      </div>
    )
  }
}

除了这个会有一个默认的选中值。

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

/* * 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>

下面是在react js中实现单选按钮的最简单方法。

class App extends React.Component { setGender(event) { console.log(event.target.value); } render() { return ( <div onChange={this.setGender.bind(this)}> <input type="radio" value="MALE" name="gender"/> Male <input type="radio" value="FEMALE" name="gender"/> Female </div> ) } } ReactDOM.render(<App/>, 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>

编辑

你可以使用箭头函数代替绑定。将上面的代码替换为

<div onChange={event => this.setGender(event)}>

对于默认值，使用defaultChecked，如下所示

<input type="radio" value="MALE" defaultChecked name="gender"/> Male