React複選框組 - 從API設置初始狀態

Question

我有一個CheckboxGroup組件，它接收options數組prop，並生成CheckboxInput組件。在頁面加載時，我打電話給API，該API返回一組預先選中的複選框（傳遞給value道具）。根據登錄用戶的不同，此調用可以返回一個空數組或一組先前選中的複選框選項。

以下代碼成功地接受了API調用的響應，並將相關複選框設置爲「checked」。我的問題是這個代碼不允許我在頁面加載後點擊複選框（點擊複選框沒有任何作用）。

我認爲初始selectedCheckboxes狀態和API調用的值之間也存在一些斷開，但是我將該設置道具作爲初始狀態讀取爲反模式（例如selectedCheckboxes: props.value,）。

export default class CheckboxGroup extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedCheckboxes: [], 
    }; 
    } 

    addCheckboxToSelected = (id) => { 
    if (this.state.selectedCheckboxes.includes(id)) { 
     // Remove checkbox from array and update state 
     const filteredArray = this.state.selectedCheckboxes.filter(item => item !== id); 
     this.setState({ selectedCheckboxes: filteredArray }); 
    } else { 
     // Add checkbox to array and update state 
     this.setState({ selectedCheckboxes: this.state.selectedCheckboxes.concat(id) }); 
    } 
    } 

    checkIfSelected = (checkboxValue) => { 
    const preSelectedCheckboxes = this.props.value; 
    let selectedBool = false; 
    preSelectedCheckboxes.some(function(object) { 
     if (object.id === checkboxValue) { 
     selectedBool = true; 
     } 
     return false; 
    }); 
    return selectedBool; 
    } 

    render() { 
    const { label, name, options } = this.props; 
    return (
     <div className="form-group form-inline"> 
     <span className="checkboxgroup-heading">{label}</span> 

     <div className="form-group-container"> 
      {options.map(object => (
      <CheckboxInput 
       key={object.value} 
       name={name} 
       label={object.label} 
       onChange={this.addCheckboxToSelected} 
       value={object.value} 
       checked={this.checkIfSelected(object.value)} 
      /> 
     ))} 
     </div> 
     </div> 
    ); 
    } 
} 

這是無狀態的CheckboxInput組件

const CheckboxInput = ({ name, label, onChange, value, checked }) => { 
    return (
    <div className="field form-group filter-input"> 
     <input 
     type="checkbox" 
     id={value} 
     name={name} 
     value={value} 
     onChange={() => onChange(value)} 
     checked={checked} 
     /> 
     <label htmlFor={value} className="form-control">{label}</label> 
    </div> 
); 
}; 

Answer 1

檢查下面的代碼片段。這可能有幫助。如果您有任何問題，請告訴我。

const CheckboxField = ({checked, onChange}) => { 
 
    return (
 
    <input type="checkbox" checked={checked} onChange={ev => onChange(ev.target.checked)} /> 
 
); 
 
}; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    
 
    this.state = { 
 
     options: [{id: "1", checked: true}, {id: "2", checked: false}] 
 
    }; 
 
    } 
 
    
 
    handleCheckboxChange(checked, option) { 
 
    const {options} = this.state; 
 
    
 
    var cOptions = [...options]; 
 
    for(var i in cOptions) { 
 
     if(cOptions[i].id == option.id) { 
 
     cOptions[i].checked = checked; 
 
     } 
 
    } 
 
    this.setState({ 
 
     options: cOptions 
 
    },() => console.log(options)); 
 
    } 
 

 
    render() { 
 
    const {options} = this.state; 
 
    
 
    return (
 
     <div> 
 
     { 
 
      options.map(option => { 
 
      return (
 
       <CheckboxField key={option.id} checked={option.checked} onChange={value => this.handleCheckboxChange(value, option)} /> 
 
      ) 
 
      }) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>