如何使用ReactJS中的单选button？

我是ReactJS的新手，对不起，如果这听起来不对。 我有一个组件，根据收到的数据创build几个表行。

该列中的每个单元格都有一个无线电checkbox。 因此，用户可以从现有的行中select一个site_name和一个address 。 select应显示在页脚中。 那就是我被卡住的地方。

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

在jQuery中，我可以像$("input[name=site_name]:checked").val()来获得一个无线电checkboxtypes的select并将其插入到第一个页脚单元格中。

但是肯定有一个Reactjs的方式，我完全失踪了？ 非常感谢

Answer 1

渲染的任何改变都应该通过state或props来改变（ 反应文档 ）。

所以在这里我注册了input事件，然后改变state ，然后触发渲染器显示在页脚上。

 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

Answer 2

这是在反应js中实现单选button的最简单的方法。

 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="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> 

Answer 3

使无线电组件作为转储组件，并从道具传递道具。

 import React from "react"; const Radiocomponent = ({props})=> return ( <div onChange={this.setGender.bind(this)}> <input type="radio" value="MALE" name="gender" defaultChecked={props.value ==="MALE"} /> Male <input type="radio" value="FEMALE" name="gender" defaultChecked={props.value ==="FEMALE"}/> Female </div> ) ); default export Radiocomponent; 

Answer 4

点击一个单选button应该触发一个事件：

1. 调用setState，如果你只希望select知识是本地的，或者
2. 调用已经从上面传入的callbackself.props.selectionChanged(...)

在第一种情况下，更改是状态将触发重新渲染，你可以做
<td>chosen site name {this.state.chosenSiteName} </td>

在第二种情况下，callback源将更新事件以确保下线，您的SearchResult实例将在其道具中selectSiteName和selectedAddress集。

Answer 5

我也在收音机，checkbox执行困惑。 我们需要的是，收听收音机的变化事件，然后设置状态。 我做了一个性别select的小例子。

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

Answer 6

这里只是一个想法：当谈到React中的无线电input时，我通常以与之前答案中提到的不同的方式呈现所有这些。

如果这可以帮助需要渲染大量单选button的人：

 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="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> 

Answer 7

以ChinKang为基础回答说，对于那些感兴趣的人来说，我有一个更干燥的方法，

 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> ) } } 

除了这个会有一个默认的检查值。

Answer 8

根据React Docs的说法 ：

处理多个input。 当您需要处理多个受控input元素时，可以为每个元素添加一个名称属性，并让处理函数根据event.target.name的值select要执行的操作。

例如：

 export default class extends React.Component { constructor(props){ super(props); this.state = {}; } handleChange = e => { const { name, value } = e.target; this.setState({ [name]: value }); }; render() { return ( <div className="radio-buttons"> <input id="windows" value="windows" name="platform" onChange={this.handleChange}>Windows</input> <input id="mac" value="mac" name="platform" onChange={this.handleChange}>Mac</input> <input id="linux" value="linux" name="platform" onChange={this.handleChange}>Linux</input> </div> ); } } 

首先没有select单选button，所以this.state是一个空的对象，但每当单选button被选中this.state获取新的属性与input的名称和它的值。 然后检查用户是否可以select任何一个单选button，比如：

 const isSelected = this.state.platform ? true : false;