홈>
이 주제라면 아마도 다른 주제의 사본 일 것입니다.하지만 내 코드에서 내가 잘못하고있는 것을 이해하지 못합니다. 나는 여러 가지 해결책을 시도했지만 그중 아무것도 효과가 없었습니다. 내가 읽은 게시물 중 일부를 여기에 넣겠습니다.
반응 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
- 답변 # 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
를 사용할 수 있습니다 목적.
그런 다음 onClick 이벤트에 메소드를 추가하여handleInput = e => { const buttonValue = e.target.value; console.log(buttonValue); //some logic }
event
를 전달할 수 있습니다. 개체도 마찬가지입니다.onClick = {this.handleInput}
관련 자료
- angular - 버튼 클릭시 입력 된 숫자 값을 얻는 방법
- javascript - 반응 함수 구성 요소의 끝에서 값을 반환 할 것으로 예상되는 linter를 수정하는 방법은 무엇입니까?
- 자바 스크립트를 사용하여 클릭했을 때 를 사용하여 URL에 값을 추가하는 방법
- python - tkinter에서 버튼이 클릭되었는지 확인하는 방법은 무엇입니까?
- javascript - 상태 값을 클릭 한 버튼의 값으로 설정
- javascript - React의 텍스트 입력에서 버튼이 활성화되지 않습니까?
- reactjs - 반응 버튼 onClick 이벤트 호출 다른 구성 요소
- javascript - React Native에서 단일 버튼을 강조하는 방법은 무엇입니까?
- python - 사용자가 체크 버튼을 클릭 한 경우 버튼을 활성화하는 방법
- javascript - 제출 버튼을 자동으로 클릭하는 방법 - 반응하다
- java - 버튼을 클릭하면 응용 프로그램이 충돌 함
- reactjs - React의 기능 구성 요소에서 값 전달
- python - 셀레늄을 사용하여 ID, 값 및 유형이없는 요소 (버튼)를 찾는 방법은 무엇입니까?
- javascript - react native - 다른 페이지에서 버튼을 클릭 할 때보기를 어떻게 변경할 수 있습니까?
- html - React 및 Javascript 질문, 버튼 변경 배경색
- java - 버튼을 클릭하면 while () 반복이 중지됩니다
- reactjs - 이름이 지정된 함수를 사용하는 React Typescript Button 소품의 올바른 입력
- java : 클릭하면 동적으로 생성 된 버튼의 ID를 가져 오는 방법
- node.js - React는 axios에서 반환 된 배열의 모든 값을 표시하지 않습니다
- javascript - 부트 스트랩 모달 및 parsleyjs 유효성 검사를 위해 제출 버튼을 클릭 한 후 페이지 다시로드를 방지하는 방법은 무엇입니까?
관련 질문
- javascript : React JS: 객체 요소를 문자열로 연결할 때 [객체 객체] 가져오기
- javascript : EXPO EAS BUILD "HTTP 오류: 응답 code 400(잘못된 요청)"
- javascript : 데이터에 키가 있는지 확인하는 방법 [중복]
- javascript : React 최대 업데이트 깊이 초과 경고
- javascript : 반응 네이티브를 사용하여 웹 사이트로 리디렉션하는 버튼, 누를 수 있거나 터치 가능한 불투명도를 만드는 방법
- javascript : 잡히지 않은 오류: 모듈 빌드 실패(./node_modules/babel-loader/lib/index.js에서)
- javascript : 다시 차트가 있는 X축에 버튼 표시
- javascript : 프로그래밍 방식으로 Figma 플러그인에 포커스 설정
- javascript : 반응 제품에 대한 설명 표시
- javascript : React JS에서 map 메소드를 사용하여 배열 데이터를 인쇄하는 방법은 무엇입니까?
잘못된 방식으로 데이터를주고 받고 있습니다. 먼저
onClick={this.handleInput}
를 사용해야합니다 또는onClick={(e) => this.handleInput(e,'value')}
onClick={() => this.handleInput('value')}
대신 당신이'value'
를 보내고 있기 때문에 함수의 문자열.그리고 다음과 같은 방법으로받습니다 :
작동중인 데모를 확인할 수 있습니다.