Javascript 是否可以传递'；id'；属性转换为在React中的onClick属性中传递的函数？

我是一个新的反应，我正在尝试建立一个计算器

在所有表示数字的按钮中，我试图使用组件中的方法将“id”（包含字符串，如“nine”）转换为数字。但我不知道如何将id属性的值作为传递给“onClick”属性的函数的参数传递

例如：

this.inputNumber（this.id）}>7

有办法吗这个.id似乎没有引用我在同一行中设置的属性

以下是整个（未完成的）组件（如果需要）：

class Calculator extends Component {
    state = { 
        total: 0
     }

    clearTotal = () => {
        this.setState({total : 0})
    }

    inputNumber = (id) => {
        let total = this.state.total;
        let concat = total === 0 ? this.returnNumber(id) : Number("" + total + this.returnNumber(id));
        this.setState({total : concat})
        console.log(this.returnNumber(id))
    }

    render() { 
        let c = this.getClasses();
        return ( 
        <React.Fragment>
            <div className="container w-25 h-100" >
                <div className="align-items-center">
                <span id="display">{this.state.total}</span>
                <div className="row">
                    <button className={c + 'danger col-6'} id="clear" onClick={this.clearTotal}>AC</button>
                    <button className={c + 'light col'} id="divide">/</button>
                    <button className={c + 'light col'} id="multiply">*</button>
                </div>
                <div className="row">
                    <button className={c + 'secondary col'} id="seven" onClick={() => this.inputNumber(this.id)}>7</button>
                    <button className={c + 'secondary col'} id="eight">8</button>
                    <button className={c + 'secondary col'} id="nine">9</button>
                    <button className={c + 'light col'} id="subtract">-</button>
                </div>
                <div className="row">
                    <button className={c + 'secondary col'} id="four">4</button>
                    <button className={c + 'secondary col'} id="five">5</button>
                    <button className={c + 'secondary col'} id="six">6</button>
                    <button className={c + 'light col'} id="add">+</button>
                </div>
                <div className="row">
                    <div className="col-9">
                        <div className="row">
                        <button className={c + 'secondary col'} id="three">3</button>
                        <button className={c + 'secondary col'} id="two">2</button>
                        <button className={c + 'secondary col'} id="one">1</button>
                        </div>
                        <div className="row">
                        <button className={c + 'secondary col-8'} id="zero">0</button>
                        <button className={c + 'secondary col'} id="decimal">.</button>
                        </div>
                    </div>
                    <div className="col-3">
                        <button className={c + 'info h-100 w-100 col-12'} id="equals">=</button>
                    </div>
                </div>
                </div>
            </div>

        </React.Fragment> );
    }

    getClasses() {
        let b = "border border-dark btn btn-";
        return b
    }

    returnNumber(name) {
        let symbols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        let names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
        let index = names.indexOf(name);
        return symbols[index];
    }

}
 
export default Calculator;```

类计算器扩展组件{
状态={
总数：0
}
clearTotal=（）=>{
this.setState（{total:0}）
}
inputNumber=（id）=>{
让total=this.state.total；
让concat=total==0？this.returnNumber（id）：Number（“+total+this.returnNumber（id））；
this.setState（{total:concat}）
console.log（此.returnNumber（id））
}
render（）{
设c=this.getClasses（）；
报税表（
{this.state.total}
自动控制
/
*
this.inputNumber（this.id）}>7
8.
9
-
4.
5.
6.
+
3.
2.
1.
0
.
=
);
}
getClasses（）{
设b=“边界边界暗btn btn-”；
返回b
}
返回号码（姓名）{
设符号=[0,1,2,3,4,5,6,7,8,9]；
让名字=['0'、'1'、'2'、'3'、'4'、'5'、'6'、'7'、'8'、'9']；
设index=names.indexOf（name）；
返回符号[索引]；
}
}
导出默认计算器```

或

---

请阅读Reactjs文档，

这并不是您所认为的。这不是JS的工作方式。JMadelaine我假设它不会工作，因为我正在使用classes/React，我之所以把
这个
放在这里，唯一的原因是因为我在Stackoverflow Welcome中看到有人在不同的上下文中建议它。如果你觉得这是正确的答案，请接受。
<button className={c + 'secondary col'} id="seven" onClick={this.inputNumber}>7</button>

inputNumber = (e) => {
        const id = e.target.id; // get id from the event target
        let total = this.state.total;
        let concat = total === 0 ? this.returnNumber(id) : Number("" + total + this.returnNumber(id));
        this.setState({total : concat})
        console.log(this.returnNumber(id))
}

<button className={c + 'secondary col'} id="seven" onClick={(e) => this.inputNumber(e.target.id)}>7</button>

inputNumber = (id) => {
        let total = this.state.total;
        let concat = total === 0 ? this.returnNumber(id) : Number("" + total + this.returnNumber(id));
        this.setState({total : concat})
        console.log(this.returnNumber(id))
}