>

이 주제라면 아마도 다른 주제의 사본 일 것입니다.하지만 내 코드에서 내가 잘못하고있는 것을 이해하지 못합니다. 나는 여러 가지 해결책을 시도했지만 그중 아무것도 효과가 없었습니다. 내가 읽은 게시물 중 일부를 여기에 넣겠습니다.

  • 반응 js onClick은 메소드에 값을 전달할 수 없습니다

  • 클릭 한 버튼의 ID를 어떻게 얻습니까? ReactJS

  • 에 태그 ID를 전달하는 방법 반응하는 onClick 기능?

문제

value 내부의 문자열을 console.log해야합니다.  handleInput 사용

코드

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;

나는 그것을 해결하기 위해 여러 번 시도했지만 매번 내가 얻은 최대 결과는 슬프게 정의되지 않았거나 오류였습니다.

  • 답변 # 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);
    }
    
    

    작동중인 데모를 확인할 수 있습니다.

  • 답변 # 2

    먼저, 버튼을 클릭해도 현재 아무 작업도 수행되지 않으므로 각 버튼에 onClick을 추가해야합니다. 당신의 버튼 : <Button onClick={this.handleInput} value="clear">C</Button> .

    이 이벤트는 handleInput 에 전달됩니다. .

    클릭 한 버튼의 값을 얻으려면 다음을 수행하십시오.

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

  • 답변 # 3

    handleInput 함수에서 "props"를 전달했지만 "this.props"를 사용했습니다

    onclick은 모든 버튼마다 있어야합니다

    문자열 'value'를 전달하지 말고 "onClick = {(e) =>this.handleInput (e)}"

    event.target.value로 액세스 할 수 있습니다

  • 답변 # 4

    event 를 사용할 수 있습니다  목적.

    와 같은 것

       handleInput = e => {
          const buttonValue = e.target.value;
          console.log(buttonValue);
          //some logic
    }
    
    

    그런 다음 onClick 이벤트에 메소드를 추가하여 event 를 전달할 수 있습니다.  개체도 마찬가지입니다.

      onClick = {this.handleInput}
    
    

관련 자료

  • 이전 sql - postgresql - 매년 한 달에 몇 명의 고객이 활동하고 있습니까?
  • 다음 특정 시트 및 특정 범위로 제한된 Google Script onedit (e) 이벤트