reactjs 中只有 select 个复选框

Question

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

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

基本上，将select离子态上移一级。您必须在 Table 组件的上一层循环 Table 行。在那里放置一个状态字段，比如 'selectedId'，并将其作为 prop 传递给所有 Table 行组件。稍后，onChange 将从 Table 行 'id' 传播到 Table onChangeHandler，用于 'selectedId' 更新。在 Table 行的渲染函数中，只需添加 say checked = id === selectedId 即可，在任何给定时间仅使 Table 行之一 selected 。为了使其更通用，您可以稍后添加 say 'multiple' true/false 标志，其中组件可以在允许多个复选框和单个复选框之间切换 selection.

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

默认情况下，第一个会被 selected。当你 select 另一个，它会 deselect 另一个；因此在任何给定时间只允许 selected。

希望对您有所帮助！

Answer 2

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

在您的 TableRow 渲染中，在您的 <input/> 元素中使用 disabled attr。 disabled 将检查从 <App/> 传下来的 selectedId 道具，如果 selectedId 不为空且 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>

reactjs 中只有 select 个复选框

just select one checkbox in reactjs

javascript

checkboxlist

reactjs