Question

即使我移至下一步/页面并返回选择按钮的表单的初始页面，我也希望保持单击按钮的选择。我不确定如何执行该操作。我才刚刚开始学习React-谢谢。

所选btn的我的CSS

 button:active, button:focus {
            background-color: blue;
            color: #FFFFFF;
      }

目前，我已将所选按钮保存在如下状态，

patientLocation = e => {
        console.log(e.currentTarget);
        this.setState ( { patientLocation: e.target.value, selectedBtn: e.currentTarget } );
    }

我的渲染按钮

                                    <button type="button"  onClick={this.props.patientLocation} value="Bedroom"> Bedroom </button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="TV lounge"> TV lounge </button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Corridor"> Corridor </button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Bathroom / Shower"> Bathroom / Shower </button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Reading room"> Reading room</button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Activity Room"> Activity Room</button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Garden"> Garden </button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Toilet"> Toilet </button>     
                                    <button type="button"  onClick={this.props.patientLocation} value="Load more options"> Load more options </button>     
</div> ```

Answer 1

我看到2个（类似的）解决方案。首先，将所选按钮保存在父组件的状态中，并作为道具传递。您可以通过更改父母状态的道具功能。

或者您可以使用某些全局状态，例如redux。

Answer 2

您可以仅将className添加到当前选定的按钮，然后使用该className对其进行样式设置。

<button 
   id="bedroom-btn" // better to use an id to identify which button is selected
   type="button" 
   className={this.props.selectedBtn === "bedroom-btn" ? "activeBtn" : ""}  // <-- like this
   onClick={this.props.patientLocation} 
   value="Bedroom"
>
   Bedroom 
</button>

然后在CSS

button.activeBtn {
   background-color: blue;
   color: #FFFFFF;
}

并且您的handle函数变为

patientLocation = e => {
        this.setState ( { patientLocation: e.target.value, selectedBtn: e.target.id } );
}

Answer 3

您可以将jquery与reactjs一起用于DOM manipulation，就像添加和删除类一样。这是您问题的有效解决方案。

class App extends React.Component {
  state = {
    selectedBtnId: "",
    patientLocation: ""
  };
  btnArray = [
    { location: "Bedroom", id: "btnFirst" },
    { location: "TV lounge", id: "btnSecond" },
    { location: "Corridor", id: "btnThird" },
    { location: "Bathroom / Shower", id: "btnFourth" },
    { location: "Reading room", id: "btnFifth" },
    { location: "Activity Room", id: "btnSixth" },
    { location: "Garden", id: "btnSeventh" },
    { location: "Toilet", id: "btnEighth" },
    { location: "Load more options", id: "btnNineth" }
  ];
  clickHandler = (event, id, location) => {
    this.btnArray.forEach(btn => {
      jQuery("#" + btn.id).removeClass("selected");
    });
    let selectedBtnId = id === this.state.selectedBtnId ? "" : id;
    let patientLocation =
      location === this.state.patientLocation ? "" : location;
    if (selectedBtnId !== "") jQuery("#" + selectedBtnId).addClass("selected");
    this.setState({ selectedBtnId, patientLocation });
  };
  render() {
    return (
      <div className="main-class">
       {this.state.patientLocation ? (
          <h3> Patient Location {this.state.patientLocation}</h3>
        ) : null}
        {this.btnArray.map((btn, index) => (
          <button
            type="button"
            onClick={event => this.clickHandler(event, btn.id, btn.location)}
            key={btn.id}
            id={btn.id}
            className="btn"
          >
            {btn.location}
          </button>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

.App {
  font-family: sans-serif;
  text-align: center;
}
.selected {
  background-color: blue;
  color: #fff;
}
.btn {
  cursor: pointer;
}
.main-class .btn {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

我有多个按钮，当用户单击一个按钮时，我希望该按钮具有某种背景色。我该如何做到这一点？

3 个答案: