How can I create the method when I click on one checkbox other checkbox unselceted and just can select one of them.
import React, { Component } from 'react';
export default class Tablerow extends Component {
constructor(props){
super(props);
let {listwebsites} = this.props;
listwebsites.checked = false;
this.state = {
fields : {
id: listwebsites.id
}
}
this.click = this.click.bind(this);
this.selectOnlyThis = this.selectOnlyThis.bind(this);
}
click(value){
this.props.handleChangess(this.state, value);
};
render() {
const {listwebsites} = this.props;
return (
<tr>
<td><input id={`checkbox_${listwebsites.id}`} value={listwebsites.checked} onChange={e => this.click(e.target.checked)} type="checkbox" name="record"/></td>
<td>{listwebsites.name}</td>
<td>{listwebsites.url}</td>
</tr>
)
}
}
Here's how you do it, in TableRow's parent which is App.js in this snippet, use selectedId
state which store the id or TableRow's listwebsite's id if checked and will be null if not checked.
Inside your TableRow render, use disabled
attr in your<input/>
element. The disabled
will check the selectedId
props passed down from <App/>
, if selectedId
not null and selectedId
value !== current <TableRow/>
listwebsite's id, then disable the <input/>
.
const listwebsitesData = [
{ id: 1, name: 'name-1', url: 'Url-1' },
{ id: 2, name: 'name-2', url: 'Url-2' },
{ id: 3, name: 'name-3', url: 'Url-3' }
]
class App extends React.Component {
constructor(props){
super(props);
this.state = {
selectedId: null,
}
this.handleChangess = this.handleChangess.bind(this);
}
handleChangess(id, value) {
this.setState({selectedId: value===true?id:null})
}
render(){
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{
listwebsitesData.map((data)=>{
return <Tablerow selectedId={this.state.selectedId} listwebsites={data} handleChangess={this.handleChangess} />
})
}
</div>
)
}
}
class Tablerow extends React.Component {
constructor(props) {
super(props);
let { listwebsites } = this.props;
listwebsites.checked = false;
this.state = {
fields: {
id: listwebsites.id
}
}
this.click = this.click.bind(this);
this.selectOnlyThis = this.selectOnlyThis.bind(this);
}
click(value) {
this.props.handleChangess(this.state.fields.id, value);
};
selectOnlyThis(){
}
render() {
const { listwebsites, selectedId } = this.props;
return (
<tr>
<td><input disabled={selectedId && selectedId!==listwebsites.id} id={`checkbox_${listwebsites.id}`} value={listwebsites.checked} onChange={e => this.click(e.target.checked)} type="checkbox" name="record" /></td>
<td>{listwebsites.name}</td>
<td>{listwebsites.url}</td>
</tr>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>