Reactjs 如何限制用户仅选择一个组件？

我有下面的代码，它只是为我们的产品构造块，选择的状态允许选择和取消选择组件。我如何确定这些组件中的哪些被选中，并限制用户一次只能选择一个。这是JS代码

import React from 'react';

export default class singleTile extends React.Component{

constructor(props){
  super(props);
  this.title = this.props.title;
  this.desc = this.props.desc;
  this.svg = this.props.svg;
  this.id = this.props.id;
  this.state = {
    selected: false
  }
}
selectIndustry = (event) => {
    console.log(event.currentTarget.id);
    if(this.state.selected === false){
      this.setState({
        selected:true
      })
    }
    else{
      this.setState({
        selected:false
      })
    }

}


render(){
return(
    <div id={this.id} onClick={this.selectIndustry}className={this.state.selected ? 'activated': ''}>
          <div className="icon-container" >
            <div>
              {/*?xml version="1.0" encoding="UTF-8"?*/}
              { this.props.svg }
            </div>
          </div>
          <div className="text-container">
            <h2>{this.title}</h2>
            <span>{this.desc}</span>
          </div>
        </div>
    )
}

从“React”导入React；
导出默认类singleTile扩展React.Component{
建造师（道具）{
超级（道具）；
this.title=this.props.title；
this.desc=this.props.desc；
this.svg=this.props.svg；
this.id=this.props.id；
此.state={
所选：false
}
}
选择行业=（活动）=>{
日志（event.currentTarget.id）；
if（this.state.selected==false）{
这是我的国家({
所选：真
})
}
否则{
这是我的国家({
所选：false
})
}
}
render（）{
返回(
{/*？xml version=“1.0”encoding=“UTF-8”？*/}
{this.props.svg}
{this.title}
{this.desc}
)
}

---

}

您可以发布您的父组件代码吗

这并不重要，但使用此ES6功能可以节省一些时间：

constructor(props){
    super(props);
    const {title, desc, svg, id, state} = this.props;
    this.state = {
      selected: false
  }
}

---

您需要管理父组件中SingleTile组件的状态。我要做的是将两个道具传递给SingleTile组件。接受函数的onClick属性和接受布尔值的isSelected属性。您的父组件看起来像这样

IndustrySelector.js

import React from 'react';

const tileData = [{ id: 1, title: 'foo' }, { id: 2, title: 'bar' }];

class IndustrySelector extends Component {

    constructor(props) {
        super(props);
        this.state = { selectedIndustry: null };
    }

    selectIndustry(id) {
        this.setState({ selectedIndustry: id });
    }

    isIndustrySelected(id) {
        return id === this.state.selectedIndustry;
    }

    render() {
        return (
        <div>
            {tileData.map((data, key) => (
            <SingleTile
                key={key}
                {...data}
                onClick={() => this.selectIndustry(data.id)}
                isSelected={this.isIndustrySelected(data.id)}
            />
            ))}
        </div>
        );
    }
}

从“React”导入React；
const tileData=[{id:1，标题：'foo'}，{id:2，标题：'bar'}]；
类IndustrySelector扩展组件{
建造师（道具）{
超级（道具）；
this.state={selectedIndustry:null}；
}
选择行业（id）{
this.setState（{selectedIndustry:id}）；
}
isIndustrySelected（id）{
返回id==this.state.selectedIndustry；
}
render（）{
返回(
{tileData.map（（数据，键）=>(
this.selectIndustry（data.id）}
isSelected={this.isIndustrySelected（data.id）}
/>
))}
);
}
}

其工作原理如下

1。触发onClick处理程序

当用户单击SingleTile中触发onClick属性函数的元素时，将使用SingleTile组件的id调用父组件中的this.selectIndustry

请注意，在本例中，id是通过 关闭。您还可以将id作为参数传递给的函数 onClick道具

2。在父组件中设置状态

当调用

此.selectIndustry

时，它会更改父组件状态的selectedIndustry键

3。更新从SIngleTile组件中选择的值

import React from 'react';

const tileData = [{ id: 1, title: 'foo' }, { id: 2, title: 'bar' }];

class IndustrySelector extends Component {

    constructor(props) {
        super(props);
        this.state = { selectedIndustry: null };
    }

    selectIndustry(id) {
        this.setState({ selectedIndustry: id });
    }

    isIndustrySelected(id) {
        return id === this.state.selectedIndustry;
    }

    render() {
        return (
        <div>
            {tileData.map((data, key) => (
            <SingleTile
                key={key}
                {...data}
                onClick={() => this.selectIndustry(data.id)}
                isSelected={this.isIndustrySelected(data.id)}
            />
            ))}
        </div>
        );
    }
}

---

当父组件的状态更改时，React将自动重新渲染SingleTile组件。通过使用SingleTile组件的id调用

this.isIndustrySelected

，我们将id与存储在状态中的id进行比较。因此，这只适用于上次单击的单个互动程序。

如果您的问题得到回答，您应该接受首选答案。这有助于未来的读者。这是正确的。我通过将一个函数从父级传递到props并将其绑定到onchange事件来解决这个问题