Javascript 如何更改按钮'；你的风格是什么？

现在，我尝试在react中发生单击事件时更改按钮样式

所以我认为这是一个正确的方法

this.setState({
            [e.target.className]:'button-hidden'
        })

但是没有成功
单击按钮时，我想更改按钮的显示“隐藏”或“无”。
如何访问此问题？ 你能给我一个提示吗

JS代码就是这样

export default class PlanBtn extends React.Component{
    state={
        data:[{time:'1', value:'plug1', display:'button-hidden'},
           ... dummy data,]
    }
removePlan=(e)=>{
    console.log(e.target)
    this.setState({
        [e.target.className]:'button-hidden'
    })
}

render(){
    const list = this.state.data.map(
        btn => (<button onClick={this.removePlan} className={btn.display}>{btn.value}</button>)
    )
    return (
        <div id='plan-contain'>
            <div className='plan'>
                {list}
            </div>
        </div>
    )
}

我如何处理这个问题？

---

如果您能帮助我，我将非常乐意更新状态中特定数据元素的显示属性。因此，我调整了removePlan函数以获取该项的键。甚至可能值得为每个数据元素创建一个组件，并在其中管理显示状态

看看这个-

class PlanBtn extends React.Component {
  state = {
    data: [{ time: "1", value: "plug1", display: "button-reveal" }, 
    { time: "2", value: "plug2", display: "button-reveal" }]
  };
  removePlan = (e, i) => {
    console.log(e.target);
    const dataNew = [...this.state.data];
    dataNew[i].display = "button-hidden";
    this.setState({
      data: dataNew
    });
  };

  render() {
    console.log("here");
    const list = this.state.data.map((btn, i) => (
      <button onClick={e => this.removePlan(e, i)} className={btn.display}>
        {btn.value}
      </button>
    ));
    return (
      <div id="plan-contain">
        <div className="plan">{list}</div>
      </div>
    );
  }
}

class PlanBtn扩展了React.Component{
状态={
数据：[{时间：“1”，值：“plug1”，显示：“按钮显示”}，
{时间：“2”，值：“plug2”，显示：“按钮显示”}]
};
移除计划=（e，i）=>{
console.log（如target）；
constdatanew=[…this.state.data]；
dataNew[i].display=“按钮隐藏”；
这是我的国家({
数据：dataNew
});
};
render（）{
console.log（“此处”）；
const list=this.state.data.map（（btn，i）=>(
this.removePlan（e，i）}className={btn.display}>
{btn.value}
));
返回(
{list}
);
}
}

您可以尝试这样的方法

export default class PlanBtn extends React.Component{
        state={
            data:[{time:'1', value:'plug1', display:'button-hidden'},
               ... dummy data,],
            showStyle:flase

        }
    removePlan=(e)=>{
        console.log(e.target)
        this.setState({
            showStyle:!this.state.showStyle
        })
    }

    render(){
        const list = this.state.data.map(
            btn => (<button onClick={this.removePlan} 
           className={`${this.state.showStyle?'button-reveal':'button-hidden'}`}
            >{btn.value}</button>)
        )
        return (
            <div id='plan-contain'>
                <div className='plan'>
                    {list}
                </div>
            </div>
        )
    }

导出默认类PlanBtn扩展React.Component{
陈述={
数据：[{时间：'1'，值：'plug1'，显示：'button-hidden'}，
…虚拟数据，]，
展示风格：flase
}
移除计划=（e）=>{
console.log（例如target）
这是我的国家({
showStyle:！this.state.showStyle
})
}
render（）{
const list=this.state.data.map(
btn=>（{btn.value}）
)
返回(
{list}
)
}

export default class PlanBtn extends React.Component{
        state={
            data:[{time:'1', value:'plug1', display:'button-hidden'},
               ... dummy data,],
            showStyle:flase

        }
    removePlan=(e)=>{
        console.log(e.target)
        this.setState({
            showStyle:!this.state.showStyle
        })
    }

    render(){
        const list = this.state.data.map(
            btn => (<button onClick={this.removePlan} 
           className={`${this.state.showStyle?'button-reveal':'button-hidden'}`}
            >{btn.value}</button>)
        )
        return (
            <div id='plan-contain'>
                <div className='plan'>
                    {list}
                </div>
            </div>
        )
    }