我使用FieldArray动态呈现单选按钮组。
<FieldArray name="customers">
{({ fields }) =>
fields.map((name, index) => (
<div key={name}>
<label>Cust. #{index + 1}</label>
<label>
<Field
name="picked"
component="input"
type="radio"
value={index + 100}
/>{" "}
Pick {index + 100}
</label>
单击单选按钮更新表单值,但是在UI中没有选中该按钮。我很好奇这里缺少了什么。
{
"customers": [
{
"firstName": "first_name_1",
"lastName": "last_name_1"
},
{
"firstName": "first_name_2",
"lastName": "last_name_2"
}
],
"picked": "101"
}
完整代码如下:https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-r7uz8y?file=/index.js:1482-1995
示例基于https://final-form.org/docs/react-final-form/examples#field-arrays
感谢您的评分
1条答案
按热度按时间7gcisfzg1#
我读了一个文档,上面说value可以是任何变量,但是我用一个字符串值进行了测试(例如:
<Field name="radio" type="radio" value="no" component="input" />No
。它起作用了。所以如果你加了一个整数值,它不会按预期工作。如果你用这个value={JSON.stringify(index + 100)}
转换它会起作用。https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-forked-41lwoc