我是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;```
答案 0 :(得分:1)
<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