홈>2020-02-01 01:31

javascript - 클릭 한 버튼의 읽기 값을 반응

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

반응 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;

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

javascriptreactjs

답변 # 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}
```

Python2.net

javascript - 클릭 한 버튼의 읽기 값을 반응

관련 자료