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>
  );
})}

目前的代码段中有两个问题 1）当从复选框中选择时，它可以工作，但预选项目将被取消选择 2）当页面加载时，复选框没有工作，它说无法读取属性＆＃39;找到＆＃39;未定义的

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

<强>澄清

在InputCheckbox的 handleChange 上，您将新的answerValues保存为Object.keys(this.selected)，并且在开始时此选中的是一个空对象，这意味着您正在丢失第一个州。要保持第一个状态，您需要初始化所选属性。
查找undefined是因为还没有答案数组，你可以使用我提出的getter解决这个问题，或者在未定义此数组时使用defaultProps设置为默认值。 / LI>
沙箱：https://codesandbox.io/s/wnv238j1ww

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

1 个答案: