React Bootstrap ToggleButton 触发函数两次

Question

我在点击我的 React-bootstrap 切换按钮时遇到问题。他们似乎触发 handlePlatformChange() 函数两次 - 它首先传递正确的 id，然后在传递 null 后立即传递。我遇到的一个选择是在函数中包含 e.preventDefault() 但这会阻止按钮正确切换。我已经用尽了所有我能想到的选项 - 任何建议将不胜感激。

import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Button from 'react-bootstrap/Button';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';

class App extends Component {
  constructor () {
    super();
    this.state = {
        User : "",
        Platform: "battle",
        Player: "",
        Level: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handlePlatformChange = (e) => {
    this.setState({Platform: e.target.id}, function () {
      console.log(this.state.Platform);
    });
  }
    
    
  handleChange(e) {
    if (e.target.id === "usernameinput") {
      this.setState({User: e.target.value});
    }
  }

    render() {
        return (
          <div className="infoSection">
          <div className="center">
            <input type="text" id="usernameinput" value={this.state.value} onChange={this.handleChange} placeholder="Username" /><br/>
            <ToggleButtonGroup id="buttongroup" name="buttongroup" defaultValue={[1]}>
              <ToggleButton id="battle" value={1} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
              <ToggleButton id="acti" value={2} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
              <ToggleButton id="psn" value={3} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
              <ToggleButton id="xbl" value={4} variant="secondary" onClick={this.handlePlatformChange}></ToggleButton>
            </ToggleButtonGroup>
            <br/>
              <Button id="searchButton" variant="primary">Search</Button>
              <div className="displaySection">

                <p id="displayHeader">Username: {this.state.Player}<br/>
                Level: {this.state.Level}</p>
                <p id="displayInfo1">some info here</p>
                <p id="displayInfo1">some info here</p>
              </div>
          </div>
          </div>
        );
}
}

export default App;

Answer 1

您的 ToggleButton 元素实际上是标签内的输入。将这个元素转换成普通的 html 你有（第一个按钮的例子）：

<label id="battle" variant="secondary" type="button" class="btn btn-default active"
  <input type="radio" name="buttongroup" autocomplete="off" value="1"></input>
</label>

你想要的id在label标签上，但是当你点击input时你只会到达input标签。

因此，要解决您的问题，您需要将 handlePlatformChange 方法更改为：

handlePlatformChange = (e) => {
    this.setState({Platform: e.target.parentNode.id}, function () {
      console.log(this.state.Platform);
    });
  }

React Bootstrap ToggleButton 触发函数两次

React Bootstrap ToggleButton triggering function twice

javascript

css

reactjs

react-bootstrap

bootstrap-4