如何在单选按钮组件中获取默认值?

Question

我创建了一个单选组件，但单击时它没有显示选中 这是代码

import React from 'react';
import classnames from 'classnames';
const RadioButton = (field) => {
const inputClasses = classnames('form-group  has-feedback  ',{
'has-error': field.meta.touched && field.meta.error,
});
console.log(field.input.value)
return(
<div className={inputClasses}>
<label className="radio-inline custom-radio nowrap">
<input
type="radio"
name={field.id}
onClick={e => field.input.onChange(field.val)}
/>
<span>{field.label}</span>
</label>
</div>
);
};
export default RadioButton;

这是字段：

<Field
component={RadioButton}
label ="Yes"
name="person.gender"
id="person.gender"
val={true}
/>
<Field
component={RadioButton}
label ="No"
name="person.gender"
id="person.gender"
val={false}
/>

那么，如何获得作为初始值的默认值呢？

Answer 1

我想获取默认值

<Field
component={RadioButton}
label ="No"
name="court.lit"
id="court.lit"
val={field.val}
defaultChecked={false}
/>

如果要共享父组件Field组件的值，则必须将其值传递给子组件。然后传递给RadioButton组件。

<input
type="radio"
name={field.id}
value={field.val}
onClick={e => field.input.onChange(field.val)}
/>

但是当单击它时，它没有显示选中

您错过了value字段

Answer 2

使用redux-form库时(鉴于您使用field.meta和field.input，我假设是这种情况(，您通常希望遵循以下模式：

<input
{...field.input}
// your fields here
/>

这样，将为您设置onChange、value和其他字段。