对单击的按钮的读取值作出反应

Question

抱歉，如果这个主题它可能是另一个的副本，但我不明白我做错了什么我的代码+我真的是新的反应。我试过几种解决办法，但都不奏效。我会把我读到的一些帖子放在这里：

>

React js onClick无法将值传递给方法

如何获取已单击按钮的id？ReactJS

我需要用handleInput将value中的字符串记录在console.log中

代码

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;

我尝试了几次尝试来解决它，但每次我得到的最大结果都是可悲的未定义或一个错误。

由于这些帖子的访问，我想给出一点更新，并树立一个基于钩子的例子：

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

Answer 1

您正在以错误的方式发送和接收数据。首先，您需要使用onclick={this.handleinput}或onclick={(e)=>this.handleinput（e,'value')}而不是onclick={()=>this.handleinput（'value')}，因为您要在函数中发送'value'字符串。

<div className="keyboardRow roundBorder" value={"example"} onClick={e => this.handleInput(e, "value")} >

然后以以下方式接收：

handleInput(e) {
    console.log(e.target.value);
}

您可以检查工作演示。