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

基本上，将选择状态上移一级。您必须在上一层的Table组件中遍历Table行。将状态字段放在那里，例如“ selectedId”，并将其作为属性传递给所有“表”行组件。稍后，onChange将从具有“ id”的表行传播到表onChangeHandler，以进行“ selectedId”更新。在“表行”的渲染功能中，只需添加“ process (I0, I1) is begin if (I0 = '0' and I1 = '0') then D0 <= '1'; elsif (I0 = '0' and I1 = '1') then D1 <= '1'; elsif (I0 = '1' and I1 = '0') then D2 <= '1'; elsif (I0 = '1' and I1 = '1') then D3 <= '1'; end if; end process;”，这样就可以在任何给定时间仅选择一个表行。为了使它更通用，您可以稍后添加“ multiple” true / false标志，该组件可以在其中选择允许多个复选框还是单个复选框之间进行切换。

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

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

希望有帮助！

Answer 2

这是您的操作方式，在此代码段的TableRow父级（即App.js）中，使用selectedId状态存储ID或TableRow列表网站的ID（如果选中），如果未选中，则为null。

在TableRow渲染中，在disabled元素中使用<input/> attr。如果disabled不为空且selectedId的值是<App/>，则selectedId将检查从selectedId传来的<TableRow/>道具！==当前<input/>列表网站的ID ，然后禁用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>

entity:
id, primary key 
firstName, varchar
lastName, varchar
tenantId, int, b-tree indexed

attribute:
id, primary key
label, varchar
type, varchar, (enumerated as string from java enum , NUMERIC, TEXT, DATE)

attribute_value:
id, primary key 
attribute_id, fk reference attribute primary key
entity_id, fk reference entity primary key
value, varchar

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

2 个答案: