Question

有一个像这样的垃圾虫：

有三个radioGroup，我们称之为A , B, C.

答：有2个无线电，它将控制渲染B或渲染C.
B：有4个收音机，默认B-1（B的第一个收音机）
C：有10个无线电，默认C-1（C的第一个无线电）

当我选择A-1时，B被渲染，默认为B-1。

然后我选择B-2，然后选择A-2。

错误出来了，我发现C-2已经被检查了！

但我根本没有点击C-2。

那么为什么会这样？我怎么能修好它？

class Tanx extends React.Component{
    constructor() {
        super();
        this.subMit = this.subMit.bind(this);
        this.setData = this.setData.bind(this);
        this.setGreatspec = this.setGreatspec.bind(this);
        this.setPlatform = this.setPlatform.bind(this);
        this.state = {
            platform:"PC",
            create_spec:"99",
            ad:null
        };
    }
    setGreatspec(val) {
        this.setState({
            create_spec:val
        })
    }
    setPlatform(val) {
        console.log(this);
        this.setState({
            platform:val
        });

    }
    setData(val){
        this.setState({
            ad:val
        })
    }
    subMit() {
        let create_spec = this.state.create_spec;
        let platform = this.state.platform;
        let self = this;
        console.log(this.state);
        // $.ajax({
        //  url:"/req/gdt/"+platform+"/"+create_spec,
        //  type:'get',
        //  success:function(res){
        //      // var ad = res.msg&&res.msg.seatbid[0].bid[0];
        //      var ad = res.msg
        //      self.setData(ad);
        //      console.log(res);
        //  },
        //  error:function(err){
        //      console.log(err);
        //  }
        // })
    }
    render() {
        var ad = this.state.ad;
        if(ad){
            var ad_html = (<div className="col-lg-4">
                                <pre style={{background:"#eee",padding:"10px",maxHeight:"500px",overflow:"scroll"}}>
                                    <code style={{color:"green",fontSize:"14px"}}>
                                        {JSON.stringify(ad,null,"\t")}
                                    </code>
                                </pre>
                            </div>);
        }else{
            var ad_html = "";
        }
        var platform = this.state.platform;
        if(platform==='PC'){
            var radio_box = <RadioBox titles={['99','23','12','2']} name="create_spec_moblie" getVal={this.setGreatspec} />
        }else{
            var radio_box = <RadioBox titles={['80','207','208','212','147','148','149','150','79','58','59','70','113','114','10','28','31','35','69','65','133','134']} name="create_spec_moblie" getVal={this.setGreatspec} />
        }
        return(
            <div className="row">
                <div className="col-lg-3">
                    <FormGroup name="Platform">
                        <RadioBox titles={['PC','Mobile']} name="platform" getVal={this.setPlatform} />
                    </FormGroup>
                    <FormGroup name="Create_spec">
                        {radio_box}
                    </FormGroup>
                    <button className="btn btn-info btn-lg" onClick={this.subMit}>Submit</button>
                </div>
                {ad_html}
            </div>  
        )
    }
}

Answer 1

您需要了解React内幕。 React需要一种方法来识别组件的“唯一性”。在您的示例中，您使用具有相同名称的RadioBox并注入父组件输出。最后，看到的反应是完全相同的标记，但只有titles属性改变了，所以在内部，React只会改变传递给组件的道具（使用相同的组件）。

因此，最后您的组件会输出以下标记之一：

        <div className="row">
            <div className="col-lg-3">
                <FormGroup name="Platform">
                    <RadioBox titles={['PC','Mobile']} name="platform" getVal={this.setPlatform} />
                </FormGroup>
                <FormGroup name="Create_spec">
                    <RadioBox titles={['99','23','12','2']} name="create_spec_moblie" getVal={this.setGreatspec} />
                </FormGroup>
                <button className="btn btn-info btn-lg" onClick={this.subMit}>Submit</button>
            </div>
            <AdHTML here... />
        </div>

或

        <div className="row">
            <div className="col-lg-3">
                <FormGroup name="Platform">
                    <RadioBox titles={['PC','Mobile']} name="platform" getVal={this.setPlatform} />
                </FormGroup>
                <FormGroup name="Create_spec">
                    <RadioBox titles={['80','207','208','212','147','148','149','150','79','58','59','70','113','114','10','28','31','35','69','65','133','134']} name="create_spec_moblie" getVal={this.setGreatspec} />
                </FormGroup>
                <button className="btn btn-info btn-lg" onClick={this.subMit}>Submit</button>
            </div>
            <AdHTML here... />
        </div>

如您所见，您选择的版本之一，不同之处在于传递给第二个titles组件的RadioBox属性。即titles={[a, different, set, of, titles]}

因此，在这种情况下，库确定的是您使用相同的RadioBox组件并略有变化 - 即title - 并使用相同的缓存组件并重新呈现它不同的参数。因此，组件的内部状态保持不变。

但实际上，您需要为每个案例唯一呈现相同的组件。所以你必须在每种情况下传递一个id参数，并且（可能）删除name属性，因为它完全没用。

因此，在每种情况下，您都必须传递一个唯一的id参数。

<RadioBox title={[B, checkbox, titles]} id="b-checkbox" />

和

<RadioBox title={[C, checkbox, titles]} id="c-checkbox" />

React.js - 如何正确检查收音机

1 个答案: