Javascript 在“如何基于对象值勾选输入”复选框中

复选框函数工作正常，将中选定的输入值更新为

this.state={answers:[]}同时，当使用加载页面时，复选框在页面加载时不显示为选中状态

this.state = { 
  answers: [
    {
      questionID: 4, 
      answerValues: ["1", "2", "3", "4"]
    }
  ] 
}

演示：

{options.map（option=>{
var tick=checked.answerValues.find（answer=>answer==option.id）；
返回(
this.handleChange（e，option.id）}
选中={option.id==tick}
/>{" "}
{option.value}
);
})}

当前代码段中有两个问题
1） 当从复选框中选择时，它起作用，但预选的项目将变为未选择的项目
2） 当页面加载复选框不起作用时，它会显示无法读取未定义的属性“find”
问题1

无法初始化与选中道具对应的选定属性：

constructor(props, context) {
   super(props, context);

   this.selected = this.answerValues
     .reduce((obj, curr) => ({ ...obj, [curr]: true }), {});

   this.handleChange = this.handleChange.bind(this);
 }

还添加此getter以避免未定义时出错：

 get answerValues() {
   const { answerValues = [] } = this.props.checked || {};
   return answerValues;
 }

注意：您也可以直接使用来避免这种情况

问题2

而不是渲染时的这一行：

var tick = checked.answerValues.find(answer => answer == option.id);

使用：

澄清

在handleChangefrom Input复选框中，您正在将新的
应答值
保存为
对象.keys（this.selected）
，并且在开始时，此所选对象为空对象，这意味着您正在丢失第一个状态。要保持第一个状态，需要初始化选定的属性
未定义的Find是因为还没有answers数组，所以无法使用我提出的getter修复此问题，或者在未定义此数组时使用defaultProps设置为默认值
沙盒：
我将更改保存在沙盒中，以解决您所说的问题，并更新了stackoverflow答案：）
var tick = checked.answerValues.find(answer => answer == option.id);

var tick = this.answerValues.find(answer => answer == option.id);