Question

我有一个React.Component的以下渲染：

  <div>
    <input
      type="checkbox"
      id={`checkbox-${name}`}
      name={name}
      checked={checked}
      disabled={disabled}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
    />
    <label htmlFor={`checkbox-${name}`}>
      <image alt="Checkmark" src={checkmarkSvg} />
    </label>
  </div>

当我点击标签时，我看到复选框输入flash但没有被选中...我需要上面的格式，因为我隐藏了输入并使用标签来呈现自定义css3复选框样式。

为什么不点击标签检查输入类型复选框？

Answer 1

它之所以没有变化，是因为您在反应组件中将其值checked设置为checked。但是，您未执行的操作是更改checked的值的组件更改，以便组件反映此情况。输入具有受控状态，这意味着您必须控制它。以下是实施和使用的示例：

constructor(props) {
  super(props);
  this.state = { checked: false };
  this.onChange = this.onChange.bind(this);
}
onChange(e) {
  this.setState({ checked: e.target.checked });
}
render() {
  const { checked } = this.state;
  return (
    <input
      type="checkbox"
      id={`checkbox-${name}`}
      name={name}
      checked={checked}
      onChange={this.onChange}
    />
  );
}

使用React，单击标签不会更改输入类型复选框选中的值。为什么？

1 个答案: