Question

我已升级到React 16，我收到此错误，我猜这可能与此次升级有关。

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

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

我收到此错误：

ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.

我需要使用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;

和

import React from 'react';
import {RadioButtonGroup} from '../../forms';

const BookingOption = ({ name, description, image, singleSharePrice, twinSharePrice, id }) => {
    const style = {
        backgroundImage: `url(${image})`
    };
    return (
        <div className="booking-option">
            <h4>{name}</h4>
            <div>{description}</div>
            <div style={style}/>
            <div>
                <span>${singleSharePrice.amount}/pp</span>
                <span>Single Share</span>
            </div>
            <div>
                <span>${twinSharePrice.amount}/pp</span>
                <span>Twin Share</span>
            </div>
            <input type="radio" name="booking-option" value={id}/>
        </div>
    );
};

export default BookingOption;

Answer 1

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

React中名称属性的单选按钮错误

1 个答案: