Question

我在数组中有一些数据。如下面的示例所示，我通过使用map来获取它。另外，我将其传递给按钮。现在，如果我选择一个按钮，它将被选中。但是，如果我选择下一个按钮，则上一个按钮将被取消选择，而当前按钮将被选择。我不希望它发生。如果要全部单击，我想选择多个按钮。

谢谢。

以下是解决方案

   import React, { Component } from 'react';


const BUTTONS = [
    {id:0, title:'button1'},
    {id:1, title:'button2'},
    {id:2, title:'button3'}
]
class Map extends Component {
    constructor(props){
        super(props);
        this.state = {
            values: []
        }
    }
    handleButton = button => {
        let tmp = this.state.values;
        if (this.state.values.includes(button)) {
            this.setState({
                values: this.state.values.filter(el => el !== button)
            })
        } else {
            tmp.push(button);
            this.setState({
                values: tmp
            })
        }
    }

    render () {
        return (
            <div>
                {BUTTONS.map(bt=>(
                <button 
                    key={bt.id} 
                    onClick={()=>this.handleButton(bt.id)} 
                    className={this.state.values.includes(bt.id) ? "buttonPressed" : "button"}>
                    {bt.title}
                </button>
                ))}
            </div>
        );
    }
} 

export default Map;

Answer 1

取消选择按钮的原因是因为每次单击按钮都会覆盖this.state.value。

如果要进行多个选择，则需要将所有选定项保持为阵列状态，然后在渲染时检查按钮ID是否包含在该阵列中。

类似的东西：

import React, { Component } from 'react';


const BUTTONS = [
    {id:0, title:'button1'},
    {id:1, title:'button2'},
    {id:2, title:'button3'}
]
class Map extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedValues: []
        }
    }

    handleButton = buttonId => {
        let newSelectedValues = this.state.selectedValues;
        newSelectedValues.push(buttonId);
        this.setState({
            selectedValues: newSelectedValues
        })
    }

    render () {
        return (
            <div>
                {BUTTONS.map(bt => (
                    <button 
                        key={bt.id} 
                        onClick={()=>this.handleButton(bt.id)} 
                        className={this.state.selectedValues.includes(bt.id) ? "buttonPressed" : "button"}>
                            {bt.title}
                    </button>
                ))}
            </div>
        );
    }
} 

export default Map;

Answer 2

如果需要多个选择，则需要一个数组：

this.state = {
   values:[]
}

并在每次点击时将其推送 Correct way to push into state array

Answer 3

选择多个buttons

您最好将state用作array。

this.state = {
  values: []
}

，您可以push个项目。

let tmp = this.state.values;
tmp.push(button);
this.setState({
  values: tmp
});

在render()中，您必须检查state.values是否有bt.id

className={this.state.values.includes(bt.id) ? "buttonPressed" : "button"

切换多个buttons

您可以在handleButton()中检查所选按钮是否已被选中

handleButton = button => {
  if (this.state.values.includes(button)) {
    this.setState({
      values: this.state.values.filter(el => el !== button)
    })
  }

const BUTTONS = [
    { id: 0, title: 'button1' },
    { id: 1, title: 'button2' },
    { id: 2, title: 'button3' }
]
class Map extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            values: []
        }
    }

    handleButton = button => {
        let tmp = this.state.values;
        if (this.state.values.includes(button)) {
            this.setState({
                values: this.state.values.filter(el => el !== button)
            })
        } else {
            tmp.push(button);
            this.setState({
                values: tmp
            })
        }
    }

    render() {
        return (
            <div>
                {BUTTONS.map(bt => (
                    <button
                        key={bt.id}
                        onClick={() => this.handleButton(bt.id)}
                        className={this.state.values.includes(bt.id) ? "buttonPressed" : "button"}>
                        {bt.title}
                    </button>
                ))}
            </div>
        );
    }
}

export default Map;

在Reactjs中选择多个选项

3 个答案: