Redux 表单 - 具有默认值的复选框并将其设置为禁用

Question

我想确认一下这个结构是否正确。

我需要为复选框设置默认值，所以我使用了 checked={input.value}。我还需要设置为禁用，然后我通过了 disabled prop:

// Using the Checkbox component  
<Field
  name="completed"
  label="Completed"
  disabled={this.props.disableCompleted}
  component={Checkbox}
/>

function Checkbox({ input, label, disabled }) {
  return (
    <div className="form-group">
      <label className="mt-checkbox">
        <input 
          type="checkbox" 
          disabled={disabled} 
          checked={input.value} 
          {...input} /> {label}
        <span></span>
      </label>
    </div>
  );
}

有更好的方法吗？

Answer 1

您对 enabling/disabling 复选框的实现是正确的。

要显示复选框的默认选中值，您需要使用 defaultChecked。在您的示例中，您没有将 input 值传递给 Checkbox（我只看到 disabled 和 label）。确保你是并且它是一个布尔值。那你应该可以走了。

Redux 表单 - 具有默认值的复选框并将其设置为禁用

Redux Form - Checkbox with a default value and set it to be disabled

checkbox

reactjs

redux

redux-form