时间戳

首页 > 解决方案 > 是否可以将“id”属性的值传递给 React 中的 onClick 属性中传递的函数？

javascript - 是否可以将“id”属性的值传递给 React 中的 onClick 属性中传递的函数？

问题描述

我是 React 新手，我正在尝试构建一个计算器。

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

例子：

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

有没有办法做到这一点？this.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;```

标签： javascriptreactjs

解决方案

<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))
}

请阅读 Reactjs 文档，https: //reactjs.org/docs/handling-events.html

推荐阅读