只需选择在reactjs一个复选框

Question

如何创建方法当我点击unselceted一个复选框其他复选框，然后才可以选择其中之一。

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

Answer 1

这里是你如何做到这一点，在的TableRow的母公司是在App.js此代码段，使用的存储ID或的TableRow的listwebsite的ID，如果检查，将是无效的，如果没有选中selectedId状态。

里面你的TableRow渲染，使用disabled ATTR在your<input/>元素。该disabled将检查从selectedId传下来的<App/>道具，如果selectedId NOT NULL和selectedId价值！==当前<TableRow/> listwebsite的ID，然后禁用<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>

Answer 2

基本上，移动选择状态的上一级。您必须遍历表行，表中的成分一个级别。把状态字段那里，说，“selectedId”，并把它作为道具的所有表行的组件。后来的onChange从表行与“ID”表onChangeHandler传播，为“selectedId”更新。在表行渲染功能，只需加说checked = id === selectedId从而使得在任何给定的时间选择的表行之一。为了使它更通用的，可在以后添加说“多”真/假标志，其中元件能够允许多个VS单个复选框选择之间切换。

工作实例https://codesandbox.io/s/zn9l7qpn83

默认情况下，第一个会被选中。当您选择另一个，它会取消其他的一个;从而允许只有一个在任何给定时间来选择。

希望能帮助到你！