如何在ReactJS中使用单选按钮？
如何在ReactJS中使用单选按钮？
提问于 2015-01-06 00:55:29
我是ReactJS的新手，如果这听起来不太对劲，我很抱歉。我有一个组件，它根据接收到的数据创建几个表行。
列中的每个单元格都有一个单选复选框。因此，用户可以从现有行中选择一个site_name和一个address。所选内容应显示在页脚中。这就是我被卡住的地方。
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()一样选择一个单选复选框类型并将其插入到第一个页脚单元格中。
但是肯定有一种Reactjs的方式，我完全忽略了？非常感谢
回答 10
Stack Overflow用户
回答已采纳
发布于 2015-01-06 01:45:12
对渲染的任何更改都应该通过state或props (react doc)进行更改。
因此，我在这里注册了输入的事件，然后更改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>
);
}
});Stack Overflow用户
发布于 2017-01-11 14:04:46
将无线电组件设为哑组件，并将道具传递给父级。
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;它很容易测试，因为它是一个哑组件(一个纯函数)。
Stack Overflow用户
发布于 2016-09-28 06:27:36
这里只有一个想法:当涉及到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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27784212
复制相关文章
相似问题