Javascript React中name属性的单选按钮错误

我升级到React 16，我得到了这个错误，我猜可能与这次升级有关

我有几个单选按钮，如下所示：

<input type="radio" name="booking-option" value={id}/>

我需要使用name属性对单选按钮进行分组。你知道我怎样才能把这个修好吗

要求提供更多核心资源：

    import React from 'react';
    import BookingOption from './BookingOption';
    const BookingSliderItem = ({title, options}) => {

        return (
            <div className="booking-departures__slider-item">
                <h3>{title}</h3>
                {
                    options.map((option) => <BookingOption key={option.id} {...option}/>)
                }
            </div>
        );

    };

    export default BookingSliderItem;

从“React”导入React；
从“./BookingOption”导入BookingOption；
常量BookingSliderItem=（{title，options}）=>{
返回(
{title}
{
options.map（（option）=>）
}
);
};
导出默认BookingSliderItem；

及

从“React”导入React；
从“../../forms”导入{RadioButtongGroup}；
const BookingOption=（{name，description，image，singleSharePrice，twinSharePrice，id}）=>{
常量样式={
backgroundImage:`url（${image}）`
};
返回(
{name}
{说明}
${singleSharePrice.amount}/pp
单股
${twinSharePrice.amount}/pp
双股
);
};
导出默认记账选项；

React不再允许您在输入标记中使用

name

属性。要进行不同的选择，可以使用属性

checked={true}

并使用

onChange

方法切换选择。我可以向您演示如何在不使用

name

this.state = {
  selected_id: "a"
};

changeID(new_id){
  this.setState({ selected_id: new_id });
}

你的无线电输入看起来像

<input type="radio" value={id} checked={this.state.selected_id === "a"} onChange={()=>this.changeID(id)}/>A
<input type="radio" value={id} checked={this.state.selected_id === "b"} onChange={()=>this.changeID(id)}/>B

this.changeID（id）}/>A
this.changeID（id）}/>B

React不再允许您在输入标记中使用

name

属性。要进行不同的选择，可以使用属性

checked={true}

并使用

onChange

方法切换选择。我可以向您演示如何在不使用

name

this.state = {
  selected_id: "a"
};

changeID(new_id){
  this.setState({ selected_id: new_id });
}

你的无线电输入看起来像

<input type="radio" value={id} checked={this.state.selected_id === "a"} onChange={()=>this.changeID(id)}/>A
<input type="radio" value={id} checked={this.state.selected_id === "b"} onChange={()=>this.changeID(id)}/>B

this.changeID（id）}/>A
this.changeID（id）}/>B

您可能需要推送更完整的代码。为了确保您没有“混合反应和非反应单选输入”，您是否有一个普通HTML中的单选按钮，或者在react之外使用javascript/jquery创建的单选按钮，具有该名称？我添加了更多代码-单选按钮位于react组件中。所以没有j查询。。。我已经说过，我正在使用jquery进行Slick carousel……您刚才给了我一个提示@AndyRay。我删除了初始化滑头转盘，不再出现错误……如果您需要这两个元素，您可以随时更改react元素的“名称”，并将其映射到其他地方。一般来说，对于React开发，我们希望所有或大部分页面HTML都由React呈现。看起来您遇到了一个边缘情况，其中有些内容超出了react。您可能希望推送一个更完整的代码。为了确保您没有“混合反应和非反应单选输入”，您是否有一个普通HTML中的单选按钮，或者在react之外使用javascript/jquery创建的单选按钮，具有该名称？我添加了更多代码-单选按钮位于react组件中。所以没有j查询。。。我已经说过，我正在使用jquery进行Slick carousel……您刚才给了我一个提示@AndyRay。我删除了初始化滑头转盘，不再出现错误……如果您需要这两个元素，您可以随时更改react元素的“名称”，并将其映射到其他地方。一般来说，对于React开发，我们希望所有或大部分页面HTML都由React呈现。看起来你碰到了一个边缘情况，有些东西在外面。