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

时间:2017-06-24 04:35:13

标签: javascript html5 reactjs checkbox

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:-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)
}

替代/手动

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

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