如何在 React 中保留复选框值类型？答案

【问题标题】：How can I preserve a checkbox value type in React?如何在 React 中保留复选框值类型？
【发布时间】：2017-11-27 16:53:26
【问题描述】：

我在 jsx / react 中工作，我想保留复选框的值类型。

<input
  type="checkbox"
  name={name}
  value={value}
  checked={checked}
  disabled={disabled}
  onChange={this.handleChange}
/>

目前如果值是例如它得到的布尔值或数字在 onChange 处理程序的 e.target.value 句柄中转换为字符串。例如。 “假”或“1”。

有没有办法保留类型，还是有比JSON.parse(JSON.stringify()) 更惯用的重新建立类型的方法？

【问题讨论】：

JavaScript 是松散类型的。 TypeScript 或许可以做你想做的事。
据我了解，打字稿中也会存在同样的问题。这不是开发人员输入错误，这是布尔值/数字输入，字符串输出。
你可能是对的。这是一个很常见的问题。您是否遇到了导致问题的特定情况，或者您只是想知道如何处理这种情况？
我有一个一般问题的具体实例，最好以最惯用的方式处理。
规范说复选框值必须是文本，所以看起来 React 只是在任何值上运行 .toString() 来遵守。看起来需要特殊处理。

标签： javascript html reactjs checkbox

【解决方案1】：

最佳

HTML 复选框值（与所有属性一样）必须是文本。这意味着所有非字符串数据都必须序列化为字符串。 React 默认使用 .toString()。

我认为最灵活、可逆和惯用的方法是使用JSON.stringify()，然后使用JSON.parse() 来恢复。

<input
  type="checkbox"
  name={name}
  value={JSON.stringify(value)}
  checked={checked}
  disabled={disabled}
  onChange={this.handleChange}
/>

handleChange(e) {
  const value = JSON.parse(e.target.value)
}

替代/手动

如果您只需要布尔值和数字值，Fred（未经编辑的原始）选项就可以使用。

<input
  type="checkbox"
  name={name}
  value={value}
  data-type={typeof value}
  checked={checked}
  disabled={disabled}
  onChange={this.handleChange}
/>

handleChange(e) {
  const type = e.target.getAttribute('data-type')) 
  const { value: stringValue } = e.target  
  switch(type) {
    case 'number': {
    }
    case 'boolean': {
    }
    default: {
    }
  }
}

【讨论】：

不知道为什么这被否决，但这对我有帮助，实际上应该是公认的答案。
从记忆中，另一个用户对所有内容感到不安并投了反对票，因为我觉得他们的回答（现已删除）没有抓住重点。也可以随意提出这个问题。很高兴它有帮助:)。

【解决方案2】：

您好开发者检查复选框中的保留值

            <Col sm={6}>
              <FormGroup check inline>
                <CustomInput type="radio" id="IsPaymentKind" label="Payment Kind"
                  value="Payment Kind"
                  checked={this.state.voucher_kind === 'Payment Kind'}
                  onChange={event => {
                    this.setState({ voucher_kind: event.target.value });
                  }}
                />
              </FormGroup>

              <FormGroup check inline>
                <CustomInput type="radio" id="IsReceiptKind" label="Receipt Kind"
                  value="Receipt Kind"
                  checked={this.state.voucher_kind === 'Receipt Kind'}
                  onChange={event => {
                    this.setState({ voucher_kind: event.target.value });
                  }} />
              </FormGroup>

              <FormGroup check inline>
                <CustomInput type="radio" id="Other" label="Other"
                  value="Other" checked={this.state.voucher_kind === 'Other'}
                  onChange={event => {
                    this.setState({ voucher_kind: event.target.value });
                  }} />
              </FormGroup>

            </Col>

【讨论】：

如果那篇文章有帮助的话。它并没有真正提供太多关于它的信息。请写出实际错误以及您添加的内容。
您的示例显示了如何计算“checked”的布尔值。这个问题是关于在 jsx/html 中处理复选框值的序列化。