Question

我在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())更重要的方法来重新建立类型？

Answer 1

您好，开发人员请在复选框中选中此保留值

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

Answer 2

最佳

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

替代/手动

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

<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: {
    }
  }
}

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

2 个答案:

最佳

替代/手动