如何使用reactjs組件在組中僅選擇一個復選框

Question

我有多個類別，每個類別包含多個復選框，為此，我希望使用React js一次只能在每個類別中選中1個復選框。 這就是我要的

onlyOne(event) {
    console.log("==",event.target.value)
    var checkboxes = document.getElementsByName('check')
    console.log("cheek",checkboxes);
    checkboxes.forEach((item) => {
      if (item !== event.target.name) item.checked = false
    })

}

HTML：

       <div>
        <label>RBA CONFIGURATION SCREEN </label><br/>               
        View  <input type="checkbox" name="check" value="0" onClick={this.onlyOne.bind(this)} checked=''/>
        Manage  <input type="checkbox" name="check" value="1" onClick={this.onlyOne.bind(this)} checked='' />
        Edit  <input type="checkbox" name="check" value="2" onClick={this.onlyOne.bind(this)} checked='' />
        </div>

在Reactjs中看起來像這樣的東西https://stackoverflow.com/a/37002762

無法使用單選按鈕，因為用戶應該可以取消選擇

Answer 1

我建議您根據情況切換到收音機。

回答您的問題：

 // amount of checkboxes const n = 3; class Example extends React.Component { constructor() { super(); this.state = { // checked/unchecked is stored here // initially the first one is checked: // [true, false, false] checkboxes: new Array(n).fill().map((_, i) => !i), }; } onChange(e, changedIndex) { // it is a good habit to extract things from event variable const { checked } = e.target; this.setState(state => ({ // this lets you unselect all. // but selected can be anly one at a time checkboxes: state.checkboxes.map((_, i) => i === changedIndex ? checked : false), })); } render() { const { checkboxes } = this.state; return ( <div> {checkboxes.map((item, i) => ( <input key={i} type="checkbox" checked={item} onChange={e => this.onChange(e, i) /* notice passing an index. we will use it */} /> ))} </div> ); } } ReactDOM.render(<Example />, document.querySelector('#root')); 

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