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>