blocks|key|38397|text|对渲染的任何更改都应该通过state或props+(react+doc)进行更改。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|38398|因此，我在这里注册了输入的事件，然后更改state，这将触发渲染以显示在页脚上。|38399|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>
+++++++);
++}
});|code-block|syntax|javascript|38400|jsbin|38401|entityMap|0|LINK|mutability|MUTABLE|url|http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html|1|http://jsbin.com/vodowiyoda/4/edit?js,output^0|D|5|J|5|Q|9|0|0|K|5|0|0|0|5|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|O|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>Any changes to the rendering should be change via the <code>state</code> or <code>props</code> (<a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html" rel="noreferrer">react doc</a>).</p>

<p>So here I register the event of the input, and then change the <code>state</code>, which will then trigger the render to show on the footer.</p>

<pre class="lang-js prettyprint-override"><code>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 (
               &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;input type="radio" name="site_name" 
                                   value={result.SITE_NAME} 
                                   checked={this.state.site === result.SITE_NAME} 
                                   onChange={this.onSiteChanged} /&gt;{result.SITE_NAME}&lt;/td&gt;
                        &lt;td&gt;&lt;input type="radio" name="address" 
                                   value={result.ADDRESS}  
                                   checked={this.state.address === result.ADDRESS} 
                                   onChange={this.onAddressChanged} /&gt;{result.ADDRESS}&lt;/td&gt;
                    &lt;/tr&gt;
               &lt;/tbody&gt;
           );
       }, this);
       return (
           &lt;table className="table"&gt;
               &lt;thead&gt;
                   &lt;tr&gt;
                       &lt;th&gt;Name&lt;/th&gt;
                       &lt;th&gt;Address&lt;/th&gt;
                   &lt;/tr&gt;
               &lt;/thead&gt;
                {resultRows}
               &lt;tfoot&gt;
                   &lt;tr&gt;
                       &lt;td&gt;chosen site name {this.state.site} &lt;/td&gt;
                       &lt;td&gt;chosen address {this.state.address} &lt;/td&gt;
                   &lt;/tr&gt;
               &lt;/tfoot&gt;
           &lt;/table&gt;
       );
  }
});
</code></pre>

<p><a href="http://jsbin.com/vodowiyoda/4/edit?js,output" rel="noreferrer">jsbin</a></p>


blocks|key|38432|text|我在无线电，复选框的实现中也感到困惑。我们需要的是，监听广播的变化事件，然后设置状态。我举了一个性别选择的小例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38433|​|38434|/*
+*+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'));|code-block|syntax|javascript|38435|<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>|38436|38437|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I also got confused in radio, checkbox implementation. What we need is, listen change event of the radio, and then set the state. I have made small example of gender selection.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/*
 * 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  &lt;div&gt;
        Gender:
        &lt;div&gt;
          &lt;input type="radio" checked={gender == "male"} 
onClick={this.setGender} value="male" /&gt; Male
          &lt;input type="radio" checked={gender == "female"} 
onClick={this.setGender} value="female"  /&gt; Female
        &lt;/div&gt;
        { "Select Gender: " } {gender}
      &lt;/div&gt;;
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(&lt;App gender="male" /&gt;, document.getElementById('app'));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|38497|text|这里只有一个想法:当涉及到React中的无线电输入时，我通常会以先前答案中提到的不同方式呈现所有这些输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38498|如果这可以帮助任何需要渲染大量单选按钮的人：|38499|​|38500|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")
)|code-block|syntax|javascript|38501|<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>|38502|38503|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Just an idea here: when it comes to radio inputs in React, I usually render all of them in a different way that was mentionned in the previous answers. </p>

<p>If this could help anyone who needs to render plenty of radio buttons:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
  /*
    [[Label, associated value], ...]
  */
  
  const inputs = [["Male", "M"], ["Female", "F"], ["Other", "O"]]
  
  return (
    &lt;div&gt;
      {
        inputs.map(([text, value], i) =&gt; (
	  &lt;div key={ i }&gt;
	    &lt;input type="radio"
              checked={ this.state.gender === value } 
	      onChange={ /* You'll need an event function here */ } 
	      value={ value } /&gt; 
    	    { text }
          &lt;/div&gt;
        ))
      }
    &lt;/div&gt;
  )
}

ReactDOM.render(
  &lt;RadioInputs /&gt;,
  document.getElementById("root")
)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;

&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|38544|text|为了在ChinKang+said的基础上回答他的问题，我有一个更干燥的方法，对于感兴趣的人来说是在es6中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38545|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>
++++)
++}
}|code-block|syntax|javascript|38546|除了这个会有一个默认的校验值。|38547|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>To build upon ChinKang said for his answer, I have a more dry'er approach and in es6 for those interested:</p>

<pre><code>class RadioExample extends React.Component {
  constructor(props) {
    super(props);

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

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

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

<p>except this one would have a default checked value.</p>


blocks|key|4545595|text|将无线电组件设为哑组件，并将道具传递给父级。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4545596|import+React+from+"react";

const+Radiocomponent+=+({+value,+setGender+})+=>+(+
++<div+onChange={setGender.bind(this)}>
++++<input+type="radio"+value="MALE"+name="gender"+defaultChecked={value+==="MALE"}+/>+Male
++++<input+type="radio"+value="FEMALE"+name="gender"+defaultChecked={value+==="FEMALE"}/>+Female
++</div>
);

export+default+Radiocomponent;|code-block|syntax|javascript|4545597|它很容易测试，因为它是一个哑组件(一个纯函数)。|4545598|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Make the radio component as dumb component and pass props to from parent.</p>
<pre><code>import React from &quot;react&quot;;

const Radiocomponent = ({ value, setGender }) =&gt; ( 
  &lt;div onChange={setGender.bind(this)}&gt;
    &lt;input type=&quot;radio&quot; value=&quot;MALE&quot; name=&quot;gender&quot; defaultChecked={value ===&quot;MALE&quot;} /&gt; Male
    &lt;input type=&quot;radio&quot; value=&quot;FEMALE&quot; name=&quot;gender&quot; defaultChecked={value ===&quot;FEMALE&quot;}/&gt; Female
  &lt;/div&gt;
);

export default Radiocomponent;
</code></pre>
<p>It's easy to test as it is a dumb component (a pure function).</p>


blocks|key|4545606|text|import+React,+{+Component+}+from+"react";

class+RadionButtons+extends+Component+{
++constructor(props)+{
++++super(props);

++++this.state+=+{
++++++//+gender+:+""+,+//+use+this+one+if+you+don't+wanna+any+default+value+for+gender
++++++gender:+"male"+//+we+are+using+this+state+to+store+the+value+of+the+radio+button+and+also+use+to+display+the+active+radio+button
++++};

++++this.handleRadioChange+=+this.handleRadioChange.bind(this);++//+we+require+access+to+the+state+of+component+so+we+have+to+bind+our+function+
++}

++//+this+function+is+called+whenever+you+change+the+radion+button+
++handleRadioChange(event)+{
++++++//+set+the+new+value+of+checked+radion+button+to+state+using+setState+function+which+is+async+funtion
++++this.setState({
++++++gender:+event.target.value
++++});
++}


++render()+{
++++return+(
++++++<div>
++++++++<div+check>
++++++++++<input
++++++++++++type="radio"
++++++++++++value="male"+//+this+is+te+value+which+will+be+picked+up+after+radio+button+change
++++++++++++checked={this.state.gender+===+"male"}+//+when+this+is+true+it+show+the+male+radio+button+in+checked+
++++++++++++onChange={this.handleRadioChange}+//+whenever+it+changes+from+checked+to+uncheck+or+via-versa+it+goes+to+the+handleRadioChange+function
++++++++++/>
++++++++++<span
+++++++++++style={{+marginLeft:+"5px"+}}+//+inline+style+in+reactjs+
++++++++++>Male</span>
++++++++</div>
++++++++<div+check>
++++++++++<input
++++++++++++type="radio"
++++++++++++value="female"
++++++++++++checked={this.state.gender+===+"female"}
++++++++++++onChange={this.handleRadioChange}
++++++++++/>
++++++++++<span+style={{+marginLeft:+"5px"+}}>Female</span>
++++++++</div>
++++++</div>
++++);
++}
}
export+default+RadionButtons;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4545607|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import React, { Component } from "react";

class RadionButtons extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // gender : "" , // use this one if you don't wanna any default value for gender
      gender: "male" // we are using this state to store the value of the radio button and also use to display the active radio button
    };

    this.handleRadioChange = this.handleRadioChange.bind(this);  // we require access to the state of component so we have to bind our function 
  }

  // this function is called whenever you change the radion button 
  handleRadioChange(event) {
      // set the new value of checked radion button to state using setState function which is async funtion
    this.setState({
      gender: event.target.value
    });
  }


  render() {
    return (
      &lt;div&gt;
        &lt;div check&gt;
          &lt;input
            type="radio"
            value="male" // this is te value which will be picked up after radio button change
            checked={this.state.gender === "male"} // when this is true it show the male radio button in checked 
            onChange={this.handleRadioChange} // whenever it changes from checked to uncheck or via-versa it goes to the handleRadioChange function
          /&gt;
          &lt;span
           style={{ marginLeft: "5px" }} // inline style in reactjs 
          &gt;Male&lt;/span&gt;
        &lt;/div&gt;
        &lt;div check&gt;
          &lt;input
            type="radio"
            value="female"
            checked={this.state.gender === "female"}
            onChange={this.handleRadioChange}
          /&gt;
          &lt;span style={{ marginLeft: "5px" }}&gt;Female&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}
export default RadionButtons;
</code></pre>


blocks|key|38598|text|Bootstrap的朋友们，我们这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38599|export+default+function+RadioButton({+onChange,+option+})+{
++++const+handleChange+=+event+=>+{
++++++++onChange(event.target.value)
++++}

++++return+(
++++++++<>
++++++++++++<div+className="custom-control+custom-radio">
++++++++++++++++<input
++++++++++++++++++++type="radio"
++++++++++++++++++++id={+option.option+}
++++++++++++++++++++name="customRadio"
++++++++++++++++++++className="custom-control-input"
++++++++++++++++++++onChange={+handleChange+}
++++++++++++++++++++value+=+{+option.id+}
++++++++++++++++++++/>
++++++++++++++++++++<label
++++++++++++++++++++++++className="custom-control-label"
++++++++++++++++++++++++htmlFor={+option.option+}
++++++++++++++++++++++++>
++++++++++++++++++++++++{+option.option+}
++++++++++++++++++++</label>
++++++++++++</div>
++++++++</>
++++)
}|code-block|syntax|javascript|38600|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Bootstrap guys, we do it like this:</p>

<pre><code>
export default function RadioButton({ onChange, option }) {
    const handleChange = event =&gt; {
        onChange(event.target.value)
    }

    return (
        &lt;&gt;
            &lt;div className="custom-control custom-radio"&gt;
                &lt;input
                    type="radio"
                    id={ option.option }
                    name="customRadio"
                    className="custom-control-input"
                    onChange={ handleChange }
                    value = { option.id }
                    /&gt;
                    &lt;label
                        className="custom-control-label"
                        htmlFor={ option.option }
                        &gt;
                        { option.option }
                    &lt;/label&gt;
            &lt;/div&gt;
        &lt;/&gt;
    )
}

</code></pre>


blocks|key|4545664|text|@Tomasz+Mularczyk在他的回答中提到了react钩子，但我想我应该在最近使用的解决方案中只使用useState钩子。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4545665|function+Radio()+{
++const+[currentRadioValue,+setCurrentRadioValue]+=+useState()

++const+handleRadioChange+=+(e)+=>+{
++++setCurrentValue(e.target.value);
++};

++return+(+
++++<>
++++++<div>
++++++++<input
++++++++++id="radio-item-1"
++++++++++name="radio-item-1"
++++++++++type="radio"
++++++++++value="radio-1"
++++++++++onChange={handleRadioChange}
++++++++++checked={currentRadioValue+===+'radio-1'}
++++++++/>
++++++++<label+htmlFor="radio-item-1">Radio+Item+1</label>
++++++</div>
++++++<div>
++++++++<input
++++++++++id="radio-item-2"
++++++++++name="radio-item-2"
++++++++++type="radio"
++++++++++value="radio-2"
++++++++++onChange={handleRadioChange}
++++++++++checked={currentRadioValue+===+'radio-2'}
++++++++/>
++++++++<label+htmlFor="radio-item-2">
++++++++++Radio+Item+1
++++++++</label>
++++++</div>
++++</>
++);
}|code-block|syntax|javascript|4545666|entityMap^0|1I|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>@Tomasz Mularczyk mentions react hooks in his answer, but I thought I'd put in a solution I recently used that uses just the <code>useState</code> hook.</p>
<pre><code>function Radio() {
  const [currentRadioValue, setCurrentRadioValue] = useState()

  const handleRadioChange = (e) =&gt; {
    setCurrentValue(e.target.value);
  };

  return ( 
    &lt;&gt;
      &lt;div&gt;
        &lt;input
          id=&quot;radio-item-1&quot;
          name=&quot;radio-item-1&quot;
          type=&quot;radio&quot;
          value=&quot;radio-1&quot;
          onChange={handleRadioChange}
          checked={currentRadioValue === 'radio-1'}
        /&gt;
        &lt;label htmlFor=&quot;radio-item-1&quot;&gt;Radio Item 1&lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;input
          id=&quot;radio-item-2&quot;
          name=&quot;radio-item-2&quot;
          type=&quot;radio&quot;
          value=&quot;radio-2&quot;
          onChange={handleRadioChange}
          checked={currentRadioValue === 'radio-2'}
        /&gt;
        &lt;label htmlFor=&quot;radio-item-2&quot;&gt;
          Radio Item 1
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/&gt;
  );
}
</code></pre>


blocks|key|38675|text|这是我用过的。希望这能有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38676|首先定义变量。|38677|const+[variableName,+setVariableName]+=+useState("");|code-block|syntax|javascript|38678|然后，我们需要实际的单选按钮。|38679|<input
+++type="radio"
+++name="variableName"
+++value="variableToCheck"
+++onChange={(e)+=>
+++setVariableName("variableToCheck")
+++}
+++checked={variableName+===+"variableToCheck"}
/>|38680|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here's what I have used. Hope this helps.<br/>
Defining variable first.</p>
<pre><code>const [variableName, setVariableName] = useState(&quot;&quot;);
</code></pre>
<p>Then, we will need the actual radio buttons.</p>
<pre><code>&lt;input
   type=&quot;radio&quot;
   name=&quot;variableName&quot;
   value=&quot;variableToCheck&quot;
   onChange={(e) =&gt;
   setVariableName(&quot;variableToCheck&quot;)
   }
   checked={variableName === &quot;variableToCheck&quot;}
/&gt;
</code></pre>


blocks|key|4545715|text|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>
++);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4545716|工作示例：https://stackblitz.com/edit/react-ovnv2b|unstyled|offset|length|4545717|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/react-ovnv2b^0|0|5|14|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>import React from 'react';
import './style.css';

export default function App() {
  const [currentRadioValue, setCurrentValue] = React.useState('on');
  const handleRadioChange = value =&gt; {
    setCurrentValue(value);
  };
  return (
    &lt;div&gt;
      &lt;&gt;
        &lt;div&gt;
          &lt;input
            name=&quot;radio-item-1&quot;
            value=&quot;on&quot;
            type=&quot;radio&quot;
            onChange={e =&gt; setCurrentValue(e.target.value)}
            defaultChecked={currentRadioValue === 'on'}
          /&gt;
          &lt;label htmlFor=&quot;radio-item-1&quot;&gt;Radio Item 1&lt;/label&gt;
          {currentRadioValue === 'on' &amp;&amp; &lt;div&gt;one&lt;/div&gt;}
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input
            name=&quot;radio-item-1&quot;
            value=&quot;off&quot;
            type=&quot;radio&quot;
            onChange={e =&gt; setCurrentValue(e.target.value)}
            defaultChecked={currentRadioValue === 'off'}
          /&gt;
          &lt;label htmlFor=&quot;radio-item-2&quot;&gt;Radio Item 2&lt;/label&gt;
          {currentRadioValue === 'off' &amp;&amp; &lt;div&gt;two&lt;/div&gt;}
        &lt;/div&gt;
      &lt;/&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<p>working example: <a href="https://stackblitz.com/edit/react-ovnv2b" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ovnv2b</a></p>


<p>I am new to ReactJS, sorry if this sounds off.  I have a component that creates several table rows according to the received data.</p>

<p>Each cell within the column has a radio checkbox. Hence the user can select one <code>site_name</code> and one <code>address</code> from the existing rows. The selection shall be shown in the footer. And thats where I am stuck.</p>

<pre><code>var SearchResult = React.createClass({
   render: function(){
       var resultRows = this.props.data.map(function(result){
           return (
               &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;input type="radio" name="site_name" value={result.SITE_NAME}&gt;{result.SITE_NAME}&lt;/input&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input type="radio" name="address" value={result.ADDRESS}&gt;{result.ADDRESS}&lt;/input&gt;&lt;/td&gt;
                    &lt;/tr&gt;
               &lt;/tbody&gt;
           );
       });
       return (
           &lt;table className="table"&gt;
               &lt;thead&gt;
                   &lt;tr&gt;
                       &lt;th&gt;Name&lt;/th&gt;
                       &lt;th&gt;Address&lt;/th&gt;
                   &lt;/tr&gt;
               &lt;/thead&gt;
                {resultRows}
               &lt;tfoot&gt;
                   &lt;tr&gt;
                       &lt;td&gt;chosen site name ???? &lt;/td&gt;
                       &lt;td&gt;chosen address ????? &lt;/td&gt;
                   &lt;/tr&gt;
               &lt;/tfoot&gt;
           &lt;/table&gt;
       );
   }
});
</code></pre>

<p>In jQuery I could do something like <code>$("input[name=site_name]:checked").val()</code> to get the selection of one radio checkbox type and insert it into the first footer cell.  </p>

<p>But surely there must be a Reactjs way, which I am totally missing? Many Thanks</p>


How to use radio buttons in ReactJS?

jQuery

我是ReactJS的新手，如果这听起来不太对劲，我很抱歉。我有一个组件，它根据接收到的数据创建几个表行。列中的每个单元格都有一个单选复选框。因此，用户可以从现有行中选择一个site_name和一个address。所选内容应显示在页脚中。这就是我被卡住的地方。var SearchResult = React.create...

问如何在ReactJS中使用单选按钮？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在ReactJS中使用单选按钮？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在ReactJS中使用单选按钮？
EN