问题描述
尽管带有单选按钮的表单可以正常工作(检查选中的选项并显示相应的组件),但我仍会收到唯一的按键提示警告。
我正在使用对象数组将数据提供给render函数并返回单选jsx。
代码如下: (主要形式)
import React,{useState} from 'react'
import FormOperationoptions from './FormOptions'
import UserConfig from './user-config/UserConfig'
const Form = () => {
const[operation,setoperation] = useState('')
const selectOperationOnChange = (event) =>{
setoperation(event.target.value);
}
const operationsListKey = FormOperationoptions.map((operations)=>{
return operations.id})
const renderAllOperations = (value,key) => {
return(
<div>
<input type='radio'
key={key}
value={value}
checked={value===operation? true:false}
readOnly
/>
<label htmlFor={value}>{value}</label><br/>
</div>
)
}
const selectedOperation = () => {
if(operation === 'userConfig'){return(<div><UserConfig /></div>)}
}
return(
<div>
<h3>Choose operation type:</h3>
<form
onChange={selectOperationOnChange}
>
{FormOperationoptions.map((operations)=>{
return renderAllOperations(operations.selectedOption,operationsListKey);})}
</form>
{selectedOperation()}
</div>
)
}
export default Form
(表单数据来自哪里)
const FormOptions = [
{
id:1,selectedOption: 'userConfig',},{
id:2,selectedOption: 'gitIgnore',{
id:3,selectedOption: 'localRepository',{
id:4,selectedOption: 'remoteRepository',]
export default FormOptions
和UserConfig组件:
import React from 'react'
const UserConfig = () =>{
return(
<div> UserConfig component </div>
)
}
export default UserConfig
感谢您的时间和投入:)
解决方法
您在错误的元素中添加了“键”。应该将其添加到“ div”而非“ input”上。
const renderAllOperations = (value,key) => {
return(
<div key={key}>
<input type='radio'
value={value}
checked={value===operation? true:false}
readOnly
/>
<label htmlFor={value}>{value}</label><br/>
</div>
)
}
如果“输入”需要输入键,则可以像下面这样传递另一个
const renderAllOperations = (value,key) => {
return(
<div key={key}>
<input type='radio'
key={`radio_${key}`}
value={value}
checked={value===operation? true:false}
readOnly
/>
<label htmlFor={value}>{value}</label><br/>
</div>
)
}
,
您能尝试一下吗?
return(
<div>
<h3>Choose operation type:</h3>
<form
onChange={selectOperationOnChange}
>
{FormOperationOptions.map((operations)=>{
return renderAllOperations(operations.selectedOption,operations.id);})}
</form>
{selectedOperation()}
</div>
)
这样,每个映射的操作都将id作为键。在您的代码中,您将OperationsListKey作为第二个参数传递,并且该函数本身在每次map函数迭代时都会返回每个操作的ID。
让我知道它是否有效。