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