在 React 如何根据对象值勾选输入复选框

Question

复选框功能工作正常，并将选定的输入值更新为this.state = { answers: [] }; 同时当页面加载时，复选框在页面加载时不显示为选中

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

演示：https://codesandbox.io/s/7jlq387686

{options.map(option => {
  var tick = checked.answerValues.find(answer => answer == option.id );
  return (
    <div className="form-check" key={option.id}>
      <label className="radio-inline" htmlFor={`${name}-${option.id}`}>
        <input
          name={name}
          id={`${name}-${option.id}`}
          type="checkbox"
          value={option.id}
          onChange={e => this.handleChange(e, option.id)}
          checked={option.id == tick}
        />{" "}
        {option.value}
      </label>
    </div>
  );
})}

目前的sn-p有两个问题 1) 当从复选框中选择时，它可以工作，但 预选项目正在变为未选中 2）当页面加载复选框不起作用时，它说 Cannot read property 'find' of undefined

Answer 1

问题 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;
 }

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

问题 2

而不是渲染上的这一行：

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

用途：

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

澄清

1. 在 InputCheckbox 的 handleChange 中，您将新的 answerValues 保存为 Object.keys(this.selected)，并且在开始时，此选定对象是一个空对象，这意味着您正在丢失第一个状态。要保持第一个状态，您需要初始化 selected 属性。
2. 发现未定义是因为还没有 answers 数组，您无法使用我建议的 getter 解决此问题，或者当此数组未定义时也使用 defaultProps 设置为默认值。

沙盒：https://codesandbox.io/s/wnv238j1ww