反应点击按钮的读取值 [英] React read value of button clicked
问题描述
很抱歉,如果这个话题可能是另一个话题的副本,但是我不明白我的代码在做什么错+我真的是新来的回应者.我尝试了几种解决方案,但没有一个起作用.我将在这里写一些我读过的帖子:
Sorry if this topic it's probably a copy of another one, but i don't understand what i'm doing wrong with my code + i'm really new to react. I tried several solutions but none of them worked. I will put here some of the post that i read:
问题
Problem
我需要使用handleInput
I need to console.log the string inside value
with handleInput
代码
Code
import React, {Component} from 'react';
import Button from './Button';
import Screen from './screen';
import './keyboard.css'
class NumberKeyboard extends Component {
constructor(props){
super(props)
this.state = {
operations: []
}
}
handleInput(props) {
const buttonValue= this.props.value;
console.log(buttonValue)
}
render() {
return (
<div className="keyboard">
<div className="column"></div>
<div className="column">
<div className="keyboardRow roundBorder" value={"example"} onClick={() => this.handleInput('value')}>
<Screen className="crystalScreen"></Screen>
<Button value="clear" >C</Button>
<Button value="±">±</Button>
<Button value=".">.</Button>
<Button value="">+</Button>
</div>
<div className="keyboardRow">
<Button value="clear">1</Button>
<Button value="2">2</Button>
<Button value="3">3</Button>
<Button value="-">-</Button>
</div>
<div className="keyboardRow">
<Button value="4">4</Button>
<Button value="5">5</Button>
<Button value="6">6</Button>
<Button value="*">X</Button>
</div>
<div className="keyboardRow lastRow">
<Button value="7">7</Button>
<Button value="8">8</Button>
<Button value="9">9</Button>
<Button value="%">÷</Button>
</div>
</div>
<div className="column"></div>
</div>
)
}
}
export default NumberKeyboard;
我尝试了几次尝试来解决它,但是每次遇到的最大结果是令人遗憾的未定义或错误.
i tried several attempts to solve it but every time the max result that i had it was the sadly undefined or an error.
---------------------------更新-------------------------
--------------------------- UPDATE -------------------------
由于对这些帖子的访问,我也想稍作更新,并基于钩子设置一个示例:
Due to visits of these post i want to give a little update and set an example based on hooks too:
import React, { useState } from 'react';
import KeyboardRow from 'src/components/keyboardRow'; /* ideally this
should contain the buttons element. i'm writing in this way just to stay
closer to the initial question */
function NumberKeyboard() {
const [selectedNumber, setSelectedNumber] = useState(0);
const selectNumber = numberSelected => {
setSelectedNumber(numberSelected)
}
return (
<>
<KeyboardRow >
<Button onClick={selectNumber} value="7">7</Button>
<Button onClick={selectNumber} value="8">8</Button>
<Button onClick={selectNumber} value="9">9</Button>
</KeyboardRow >
<div>{selectedNumber}<div>
</>
);
}
推荐答案
您以错误的方式发送和接收数据.首先,您需要使用 onClick = {this.handleInput}
或 onClick = {(e)=>this.handleInput(e,'value')}
而不是 onClick = {()=>this.handleInput('value')}
,因为您要在函数中发送'value'
个字符串.
You are sending and receiving data in a wrong way. First, you need to use onClick={this.handleInput}
or onClick={(e) => this.handleInput(e,'value')}
instead of onClick={() => this.handleInput('value')}
because you are sending 'value'
string in function.
<div className="keyboardRow roundBorder" value={"example"} onClick={e => this.handleInput(e, "value")} >
然后通过以下方式接收:
And then receive in following ways:
handleInput(e) {
console.log(e.target.value);
}
您可以检查正在运行的演示.
You ca check the working demo.
这篇关于反应点击按钮的读取值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!