Use child component props value in event handler in react-CodePudding

Here is my code

import React from 'react';
import './style.scss';

const CalcButton = (props) => {
    return (
        <button id="calcBtn" style={props.style} onClick={props.onClick}>
            {props.btnText}
        </button>
    );
};
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentNum: '0',
            log: ' ',
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        console.log('a', e.target.value);
        this.setState((state) => ({
            currentNum: state.currentNum   e.target.getAttribute(this.props.btnText),
        }));
    }

    render() {
        return (
            <div id="container">
                <div id="display">
                    <h3 id="log">{this.state.log}</h3>
                    <h3 id="currentNum">{this.state.currentNum}</h3>
                </div>
                <CalcButton
                    style={{
                        width: 150,
                        backgroundColor: 'rgb(173, 0, 0)',
                    }}
                    btnText="AC"
                    onClick={() => {
                        return this.setState({
                            currentNum: '',
                            log: '',
                        });
                    }}
                />
                <CalcButton
                    btnText="/"
                    style={{
                        backgroundColor: 'gray',
                    }}
                />
                <CalcButton
                    btnText="X"
                    style={{
                        backgroundColor: 'gray',
                    }}
                />
                <CalcButton btnText="7" onClick={this.handleClick}/>
                <CalcButton btnText="8" />
                <CalcButton btnText="9" />
                <CalcButton
                    btnText="-"
                    style={{
                        backgroundColor: 'gray',
                    }}
                />
                <CalcButton btnText="4" />
                <CalcButton btnText="5" />
                <CalcButton btnText="6" />
                <CalcButton
                    btnText=" "
                    style={{
                        backgroundColor: 'gray',
                    }}
                />
                <CalcButton btnText="1" />
                <CalcButton btnText="2" />
                <CalcButton btnText="3" />
                <CalcButton
                    btnText="="
                    style={{
                        float: 'right',
                        height: 150,
                        backgroundColor: 'rgb(34, 86, 134)',
                    }}
                />
                <CalcButton
                    btnText="0"
                    style={{
                        width: 150,
                    }}
                />
                <CalcButton btnText="." />
            </div>
        );
    }
}

export default App;

As you can see I am trying to build a calculator, but the problem I am facing is that I want to use btnText prop value of CalcButton in handleClick event handler, but I am unable to figure out how to access it in the said event handler. I know it is a very basic problem but trust me I have searched and unable to find any reference regarding my problem, kindly help.

CodePudding user response：

I do not think you need to create CalcButton component. Since your button text is going to be the same, you can do it the following way -

Create a new state which stores your button texts in an array.
Map over that state and create buttons for the calculator.
When using the handle click function, pass in the button text value.
In that function check if the button text is AC then execute another function or set the state value. Better if you create a separate function for the AC button and call it in the if-else condition you'd be doing inside the handleClick function.

If you really need to create the component then you'd need to add the handle click function to the multiple components you are reusing and pass in the value of button text into it as an argument.

I hope this helps.

CodePudding user response：

in child component :

const CalcButton = (props) => {
const handleClick = () => {
 if (props.onClick) {
   props.onClick(props.btnText);
 }
};
    return (
        <button id="calcBtn" style={props.style} onClick={handleClick}>
            {props.btnText}
        </button>
    );
};

In Parent component :

class App extends React.Component { ...
    handleClick(val) {
        console.log('a', val);
        this.setState((state) => ({
            currentNum: state.currentNum   val,
        }));
    }
......
<CalcButton btnText="7" onClick={this.handleClick}/>