javascript - 我怎么能通过 react 改变按钮的风格？

Question

现在，我正尝试通过 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>
    )
}

css是

#plan-contain{
    text-align: center;
    width: 100%;
    padding: 0 0.2px;
}

.plan{
    width:96%;
    border-radius: 3px;
    margin: 1px 1px;
}

.button-hidden{
    visibility: hidden;
    width:9%;

}
.button-reveal{
    width:9%;
    padding:0.5%;
    background-color: #00cc99;
    color: white;
    border: none;
    margin: 1px 1px;
    text-decoration: none;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button-reveal:hover{
    background-color: white;
    color: #00cc99;
    border: 2px solid #00cc99;
}

我该如何处理？如果你能帮助我，我会很高兴

Answer 1

状态中特定数据元素的显示属性最好更新。因此，我调整了 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>
    );
  }
}