Enter 키를 누른 후 onChange 이벤트를 호출하다
Bootstrap(부트스트랩). 한 from i i 、 from 、 음 、 음 、 음 、 음 、 음 、 음 、 음 i 。onChange정원이 되면 입력하세요.검증 기능에서도 같은 문제가 발생합니다.너무 빨리 호출됩니다.
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
//bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
React Doc에 따르면 다음과 같은 키보드 이벤트를 들을 수 있습니다.onKeyPress ★★★★★★★★★★★★★★★★★」onKeyUp 아니라, 이에요.onChange.
var Input = React.createClass({
render: function () {
return <input type="text" onKeyDown={this._handleKeyDown} />;
},
_handleKeyDown: function(e) {
if (e.key === 'Enter') {
console.log('do validate');
}
}
});
업데이트: React를 사용합니다.요소
다음은 React를 사용한 코드입니다.같은 기능을 하는 컴포넌트
class Input extends React.Component {
_handleKeyDown = (e) => {
if (e.key === 'Enter') {
console.log('do validate');
}
}
render() {
return <input type="text" onKeyDown={this._handleKeyDown} />
}
}
여기 jsfiddle이 있습니다.
업데이트 2: 기능하는 컴포넌트 사용
const Input = () => {
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
console.log('do validate')
}
}
return <input type="text" onKeyDown={handleKeyDown} />
}
입력 필드에서 직접 onKeyPress를 사용할 수 있습니다.onChange 함수는 입력 필드를 변경할 때마다 상태 값을 변경하고 Enter 키를 누른 후 함수 검색()을 호출합니다.
<input
type="text"
placeholder="Search..."
onChange={event => {this.setState({query: event.target.value})}}
onKeyPress={event => {
if (event.key === 'Enter') {
this.search()
}
}}
/>
폼 컨트롤(입력)을 누르면 일반적으로는submit )onSubmit이방법으로 할 수 것을 수 있는 것이 것은 입니다).이 방법으로 처리할 수 있는 것을 고려하면(입력하는 것이1개뿐인 경우는 송신 버튼이 있는 것은 옵션입니다).
const { useState } = React;
function App() {
const [text, setText] = useState("");
const [submitted, setSubmitted] = useState('');
function handleChange(e) {
setText(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
setSubmitted(text);
setText("");
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" value={text} onChange={handleChange} />
<input type="submit" value="add" />
</form>
submitted: {submitted}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<div id="root"></div> 형식 submit의 이벤트는 다음과 같은 경우에 수행됩니다.
- 송신 버튼이 있습니다.
- 송신 버튼은 없습니다만, 입력은 1개 뿐입니다.
자세한 것은 이쪽.
, 핸들러를 「바인드」에 바인드 할도 있습니다.blur )onBlur의 input포커스가 제거될 때 발생합니다(예: 포커스를 얻을 수 있는 다음 요소로 탭 이동).
하시면 됩니다.event.key
function Input({onKeyPress}) {
return (
<div>
<h2>Input</h2>
<input type="text" onKeyPress={onKeyPress}/>
</div>
)
}
class Form extends React.Component {
state = {value:""}
handleKeyPress = (e) => {
if (e.key === 'Enter') {
this.setState({value:e.target.value})
}
}
render() {
return (
<section>
<Input onKeyPress={this.handleKeyPress}/>
<br/>
<output>{this.state.value}</output>
</section>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById("react")
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>사용자를 반응시키세요.완전성을 위한 해답은 다음과 같습니다.
리액트 버전 16.4.2
키 입력마다 갱신하거나 송신시에만 값을 취득할 수 있습니다.컴포넌트에 주요 이벤트를 추가하면 동작하지만 공식 문서에서 권장하는 대체 이벤트가 있습니다.
제어된 컴포넌트와 제어되지 않은 컴포넌트
제어됨
문서 - 양식 및 제어된 구성 요소에서 다음을 수행합니다.
HTML에서 입력, 텍스트 영역 및 선택과 같은 양식 요소는 일반적으로 고유한 상태를 유지하고 사용자 입력을 기반으로 업데이트합니다.React에서는 일반적으로 변경 가능한 상태는 컴포넌트의 상태 속성으로 유지되며 setState()로만 갱신됩니다.
반응 상태를 "단일 진실의 원천"으로 함으로써 이 둘을 결합할 수 있습니다.그런 다음 양식을 렌더링하는 React 구성 요소는 후속 사용자 입력 시 해당 양식에서 수행되는 작업도 제어합니다.이러한 방식으로 React에 의해 값이 제어되는 입력 양식 요소를 "제어된 구성 요소"라고 합니다.
제어된 컴포넌트를 사용하는 경우 값을 변경할 때마다 상태를 갱신해야 합니다.이를 위해 이벤트핸들러를 컴포넌트에 바인드 합니다.문서의 예에서는 일반적으로 onChange 이벤트입니다.
예:
1) 이벤트 핸들러를 컨스트럭터로 바인드(값 유지)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) 핸들러 기능 생성
handleChange(event) {
this.setState({value: event.target.value});
}
3) 폼 제출 기능 작성(국가에서 값 가져오기)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) 렌더링
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
제어된 컴포넌트를 사용하는 경우handleChange업데이트 및 적절한 상태를 유지하기 위해 함수는 항상 실행됩니다.상태는 항상 갱신된 값을 가지며 폼이 전송되면 해당 값이 상태로부터 취득됩니다.모든 컴포넌트에 대한 함수를 작성하거나 모든 컴포넌트의 값 변경을 처리하는 간단한 함수를 작성해야 하기 때문에 폼이 매우 길면 이것이 사기일 수 있습니다.
제어 불능
Docs - Uncontrolled 구성 요소에서
대부분의 경우 제어된 컴포넌트를 사용하여 폼을 구현하는 것이 좋습니다.제어된 구성 요소에서 양식 데이터는 React 구성 요소에 의해 처리됩니다.대신 양식 데이터가 DOM 자체에서 처리되는 제어되지 않은 구성 요소를 사용할 수 있습니다.
제어되지 않은 컴포넌트를 쓰려면 모든 상태 업데이트에 대해 이벤트 핸들러를 쓰는 대신 참조를 사용하여 DOM에서 양식 값을 가져올 수 있습니다.
서의 가장 큰 은 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,onChange 즉 ''이 아니라 '기능'입니다.onSubmit이치노
예:
1) 이벤트 핸들러를 바인드하여 constructor에 입력할 ref를 작성한다(값 유지 없음).
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) 폼 제출 기능 작성(DOM 컴포넌트에서 값을 취득)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) 렌더링
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
제어되지 않은 컴포넌트를 사용하는 경우,handleChange되면, 이 하게 됩니다.폼이 송신되면, 값이 DOM 로부터 취득되어 이 시점에서 필요한 검증을 실시할 수 있습니다.입력 컴포넌트에 핸들러 함수를 작성할 필요도 없습니다.
고객님의 문제
자, 고객님의 문제에 대해서:
... 'Enter 키를 누르면 호출됩니다.
이를 수행하려면 제어되지 않은 구성 요소를 사용하십시오.onChange의 'CHANGE'입니다.enter키는 폼과handleSubmit함수가 기동됩니다.
필요한 변경 사항:
요소에서 onChange 호출을 삭제합니다.
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
// bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
// onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
제출 양식을 처리하고 입력 내용을 확인합니다.폼 제출 함수의 요소에서 값을 얻은 후 검증해야 합니다.생성자에서 요소에 대한 참조를 생성해야 합니다.
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
제어되지 않은 컴포넌트의 사용 예:
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
이렇게 작은 래퍼 기능을 쓸 수도 있습니다.
const onEnter = (event, callback) => event.key === 'Enter' && callback()
그 후, 고객의 입력에 따라 소비합니다.
<input
type="text"
placeholder="Title of todo"
onChange={e => setName(e.target.value)}
onKeyPress={e => onEnter(e, addItem)}/>
입력에 대해 Enter가 폼을 제출하지 못하도록 하는 예(내 경우 Google 지도 위치 자동 완성 입력)
<input
ref={addressInputRef}
type="text"
name="event[location]"
className="w-full"
defaultValue={location}
onChange={(value) => setLocation(value)}
onKeyDown={(e) => {
if (e.code === "Enter") {
e.preventDefault()
}
}}
/>
나는 더 좋다onKeyUp키를 놓았을 때만 발화되기 때문입니다. onKeyDown한편, 어떤 이유로 사용자가 키를 누르고 있으면는 여러 번 기동합니다.예를 들어, "누르는" 것을 들을 때Enter네트워크 요청을 작성하기 위한 키입니다.비용이 많이 들 수 있기 때문에 여러 번 실행하는 것을 원하지 않습니다.
// handler could be passed as a prop
<input type="text" onKeyUp={handleKeyPress} />
handleKeyPress(e) {
if (e.key === 'Enter') {
// do whatever
}
}
멀리 .keyCode언젠가는 폐지될 것이기 때문에
클래스 기반 컴포넌트를 사용하는 일반적인 사용 사례는 다음과 같습니다.부모 컴포넌트는 콜백 기능을 제공하고 자녀 컴포넌트는 입력 상자를 렌더링하며 사용자가 Enter 키를 누르면 사용자의 입력을 부모에게 전달합니다.
class ParentComponent extends React.Component {
processInput(value) {
alert('Parent got the input: '+value);
}
render() {
return (
<div>
<ChildComponent handleInput={(value) => this.processInput(value)} />
</div>
)
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this);
}
handleKeyDown(e) {
if (e.key === 'Enter') {
this.props.handleInput(e.target.value);
}
}
render() {
return (
<div>
<input onKeyDown={this.handleKeyDown} />
</div>
)
}
}
const [value, setValue] = useState("");
const handleOnChange = (e) => {
setValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
addTodoItem(value.trim());
setValue("");
};
return (
<form onSubmit={handleSubmit}>
<input value={value} onChange={handleOnChange}></input>
</form>
);
//You can use onkeyup directly on input field
const inputField = document.querySelector("input");
inputField.addEventListener("keyup", e => {
if (e.key == "Enter") {
console.log("hello");
}
});
언급URL : https://stackoverflow.com/questions/31272207/to-call-onchange-event-after-pressing-enter-key
'programing' 카테고리의 다른 글
| JVM의 JIT 컴파일러는 벡터화된 부동소수점 명령을 사용하는 코드를 생성합니까? (0) | 2023.01.17 |
|---|---|
| Python에서는 오브젝트가 반복 가능한지 어떻게 판단합니까? (0) | 2023.01.17 |
| 팬더에서 숫자 열을 찾으려면 어떻게 해야 하나요? (0) | 2023.01.17 |
| Java Big Decimal:가장 가까운 정수 값으로 반올림 (0) | 2023.01.17 |
| 테스트 러너 'JUnit 4'를 사용하여 테스트를 찾을 수 없습니다. (0) | 2023.01.17 |