無法呈現在反應中選擇的按鈕

Question

我們可以在 onclick 事件中擁有兩個函數嗎？ 這是我的代碼：

import React from 'react';

class Counter extends React.Component {
    state = {
        count: 0,
        inc: 'Increment',
        dec: 'Decrement',
        rst: 'Reset',
    };

    styles = {           //CSS styles into Js objects
        fontSize: 50,
        fontWeight: 'bold',
        margin: 25,
    };

    buttonstyle = {
        padding: 10,
        margin: 15,
        fontSize: 25,
    };

    buttonChange = () => {
        if (this.state.button.id === 1)
          return <p>Increment</p>
        else if (this.state.button.id === 2)
            return <p>Decrement</p>
        else
            return <p>Reset</p>
    }

    addCounter = () => {
        this.state.count++;
        this.setState({ count: this.state.count });
    }

    decrementCounter = () => {
        if (this.state.count > 0) {
            this.state.count--;
            this.setState({ count: this.state.count })
        }
    }

    resetCounter = () => {
        this.state.count = 0;
        this.setState({ count: this.state.count });
    }

    render() {

        let classes = "badge m-2 badge-warning";
        if (this.state.count === 0) {
            classes = "badge badge-warning m-2";
        }
        else {
            classes = "badge badge-success m-2";
        }
        return (

            <div style={{ textAlign: 'center' }}>
                <br></br>
                <span style={this.styles} className={classes}>{this.state.count}</span>
                <br></br>
                <div>
                    <button style={this.buttonstyle} className="btn btn-primary btn-sm" onClick={this.addCounter} id={1}>{this.state.inc}</button>
                    <button style={this.buttonstyle} className="btn btn-primary btn-sm" onClick={this.decrementCounter} id={2}>{this.state.dec}</button>
                    <button style={this.buttonstyle} className="btn btn-primary btn-sm" onClick={this.resetCounter} id={3}>{this.state.rst}</button>
                </div>
                <br></br>
                <div className="container">
                    You have pressed <span style={{ background: 'black', marginRight: 5, color: 'greenyellow' }}>{this.buttonChange} </span> button. //I want to implement the button change here
                </div>
            </div>
        );
    }
}

export default Counter;

Answer 1

buttonChange只是返回一些從 state 計算出來的 JSX，您可以調用它並呈現它的返回值。

<span
  style={{
    background: "black",
    marginRight: 5,
    color: "greenyellow"
  }}
>
  {this.buttonChange()}
</span>

Other issues I see, you are mutating your state object when you post-increment ( this.state.count++; ) and post-decrement ( this.state.count--; ). 使用功能 state 更新以從先前的 state 遞增/遞減。

此外，我將按鈕 ID 添加到您的 state 以匹配它們在您的buttonChange function 中的檢查方式。 由於您未定義this.state.button.id state，因此在跨度中沒有呈現任何內容。

addCounter = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1,
    button: { id: 1 }
  }));
};

decrementCounter = () => {
  if (this.state.count > 0) {
    this.setState((prevState) => ({
      count: prevState.count - 1,
      button: { id: 2 }
    }));
  }
};

 class Counter extends React.Component { state = { count: 0, inc: "Increment", dec: "Decrement", rst: "Reset", button: { id: null } }; styles = { //CSS styles into Js objects fontSize: 50, fontWeight: "bold", margin: 25 }; buttonstyle = { padding: 10, margin: 15, fontSize: 25 }; buttonChange = () => { if (this.state.button.id === 1) return "Increment"; else if (this.state.button.id === 2) return "Decrement"; else return "Reset"; }; addCounter = () => { this.setState((prevState) => ({ count: prevState.count + 1, button: { id: 1 } })); }; decrementCounter = () => { if (this.state.count > 0) { this.setState((prevState) => ({ count: prevState.count - 1, button: { id: 2 } })); } }; resetCounter = () => { this.setState({ count: 0, button: { id: null } }); }; render() { let classes = "badge m-2 badge-warning"; if (this.state.count === 0) { classes = "badge badge-warning m-2"; } else { classes = "badge badge-success m-2"; } return ( <div style={{ textAlign: "center" }}> <br></br> <span style={this.styles} className={classes}> {this.state.count} </span> <br></br> <div> <button style={this.buttonstyle} className="btn btn-primary btn-sm" onClick={this.addCounter} id={1} > {this.state.inc} </button> <button style={this.buttonstyle} className="btn btn-primary btn-sm" onClick={this.decrementCounter} id={2} > {this.state.dec} </button> <button style={this.buttonstyle} className="btn btn-primary btn-sm" onClick={this.resetCounter} id={3} > {this.state.rst} </button> </div> <br></br> <div className="container"> You have pressed{" "} <span style={{ background: "black", marginRight: 5, color: "greenyellow" }} > {this.buttonChange()} </span>{" "} button. </div> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render( <Counter />, rootElement );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root"></div>