Question

我有以下代码，这些代码简单地为我们的产品构造了块，并且所选状态允许选择和取消选择组件。如何确定选择了哪些组件并将用户限制为一次只能选择一个。这是ReactJS代码

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>
    )
}

}

Answer 1

您需要管理父组件中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>
        );
    }
}

其工作方式如下。

1。触发onClick处理程序

当用户单击SingleTile中的一个元素，该元素从onClick道具触发功能时，将使用SingleTile组件中的ID调用父组件中的this.selectIndustry。

请注意，在此示例中，通过关闭。您也可以将id作为参数传递给 onClick道具。

2。在父组件中设置状态

调用this.selectIndustry时，它将更改父组件状态的selectedIndustry键。

3。从SIngleTile组件更新isSelected值

当父组件的状态更改时，

React将自动重新渲染SingleTile组件。通过使用SingleTile组件的ID调用this.isIndustrySelected，我们将ID与我们在状态中存储的ID进行比较。因此，这仅与上次单击的SingleTile相等。

Answer 2

您可以发布父级组件代码吗？

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

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

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

2 个答案: