只需在 reactjs 中选择一个复选框

Question

当我单击一个复选框时，我如何创建方法，而另一个复选框未选中并且只能选择其中一个。

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 的父级（即此 sn-p 中的 App.js）中，使用 selectedId 状态存储 id 或 TableRow 的 listwebsite 的 id（如果选中，则为空）。

在您的 TableRow 渲染中，在您的<input/> 元素中使用disabled attr。 disabled 将检查从<App/> 传递下来的selectedId 属性，如果selectedId 不为空且selectedId 值！== 当前<TableRow/> 列表网站的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 这样，在任何给定时间只选择一个表格行。为了使其更通用，您可以稍后添加 say 'multiple' true/false 标志，组件可以在其中切换允许多个与单个复选框选择。

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

默认情况下，将选择第一个。当您选择另一个时，它会取消选择另一个；因此在任何给定时间只允许选择一个。

希望对你有帮助！