ReactJS를 사용하여 입력 필드의 값을 얻는 방법은 무엇입니까?
다음과 같은 React 컴포넌트가 있습니다.
export default class MyComponent extends React.Component {
onSubmit(e) {
e.preventDefault();
var title = this.title;
console.log(title);
}
render(){
return (
...
<form className="form-horizontal">
...
<input type="text" className="form-control" ref={(c) => this.title = c} name="title" />
...
</form>
...
<button type="button" onClick={this.onSubmit} className="btn">Save</button>
...
);
}
};
이 「」를 하고 있다.undefined코드에 요? - 에 무슨 문제가 있는 걸까요?
여기에는 작업(강제)이 필요한 React 버전 및 후크 사용 여부에 따라 세 가지 답변이 있습니다.
가장 중요한 것:
React가 어떻게 동작하는지 이해하는 것이 중요합니다(프로트: React 웹사이트의 React 튜토리얼에서 실행할 가치가 있습니다).이 문서는 잘 쓰여져 있으며, 실제로 작업을 수행하는 방법을 설명하는 방식으로 모든 기본 사항을 망라하고 있습니다.여기서 "적절하게"란 웹 페이지를 작성하는 것이 아니라 브라우저에 렌더링된 애플리케이션의 사용자 인터페이스를 작성하는 것을 의미합니다.실제 사용자 인터페이스 작업은 모두 "웹 페이지 작성에서 익숙한 것"이 아니라 React에서 수행됩니다(이 때문에 React 앱은 "앱"이지 "웹 페이지"가 아닙니다).
리액트 애플리케이션은 다음 두 가지를 기반으로 렌더링됩니다.
- 부모가 라이프사이클 전체에 걸쳐 수정할 수 있는 해당 구성요소의 인스턴스를 생성하는 부모에 의해 선언된 구성요소의 속성
- 컴포넌트 자체의 내부 상태, 즉 컴포넌트는 라이프 사이클 전체에 걸쳐 스스로 수정할 수 있습니다.
React를 사용할 때 명시적으로 하지 않는 것은 HTML 요소를 생성하고 그 요소를 사용하는 것입니다. React에 명령하면<input>예를 들어 HTML 입력 요소를 만드는 것이 아니라 React에 의해 제어되는 이벤트 처리와 함께 웹용 React 앱을 컴파일할 때 HTML 입력 요소로 렌더링되는 React 입력 개체를 생성하도록 React에 지시합니다.
React를 사용하면 사용자가 정의한 방식으로 응용 프로그램 상태를 변경하는 조작 가능한 데이터를 사용자에게 제공하는 애플리케이션 UI 요소를 생성할 수 있습니다.사용자가 수행한 작업은 컴포넌트의 소품 또는 상태를 업데이트하고 이를 새로운 UI 표현을 생성하기 위한 신호로 사용할 수 있습니다.변경된 컴포넌트의 경우 응용 프로그램인터페이스의 일부가 갱신되어 새로운 상태가 반영될 수 있습니다.
이 프로그래밍 모델에서는 사용자가 보고 상호작용하는 UI가 아니라 앱의 내부 상태가 최종 권한입니다. 사용자가 입력 필드에 무언가를 입력하려고 하지만 사용자가 이를 처리하기 위해 아무것도 입력하지 않은 경우, 아무 일도 일어나지 않습니다. UI는 응용 프로그램 상태를 반영하는 것이 아닙니다.사실상 브라우저의 DOM은 이 프로그래밍 모델에서 거의 후술적인 것입니다.그것은 지구 전체가 사실상 액세스 할 수 있는 매우 편리한 UI 프레임워크일 뿐입니다(그러나 React만이 조작 방법을 알고 있는 것은 아닙니다).
구체적인 예
이제 입력 요소와 상호작용하는 사용자가 React에서 어떻게 작동하는지 살펴보겠습니다.우선, 유저가 조작할 수 있는 UI 요소를 준비해 둘 필요가 있습니다.
- 저장 및 모두)를이 때, 「」라고 하는 것은 「」라고 하는 것입니다.
onChange이치노 - React는하여 React DOM을 합니다.
inputDOM이 )<input>합니다.onChange데이터를 할 수 이벤트 데이터가 해 주세요).Resact는 DOM 이벤트 데이터가 아닙니다(DOM 이벤트 데이터change일반 DOM 이벤트 리스너와 같은 이벤트데이터를 취득하지 않습니다). - 그런 다음 React 라이브러리는 가상 DOM을 사용자가 상호 작용할 수 있는 UI로 변환하고 애플리케이션 상태가 변경되면 업데이트됩니다.브라우저에서 실행 중이기 때문에 HTML 입력 요소를 구축합니다.
그런 다음 사용자는 실제로 해당 입력 요소와 상호 작용하려고 합니다.
- 사용자가 입력 요소를 클릭하고 입력을 시작합니다.
- 입력 요소에는 아직 아무 일도 일어나지 않았습니다. 대신 입력 이벤트는 React에 의해 가로채지고 즉시 사라집니다.
- 이벤트로 하고 React를 합니다.
onChangeReact 이벤트 데이터를 사용하여 가상 DOM 구성 요소의 기능을 수행합니다. - 이 함수는 사용자가 작성한 방법에 따라 어떤 작업을 수행할 수 있으며, 이 경우 사용자가 입력하려고 한 내용으로 컴포넌트 상태를 업데이트하기 위해 작성한 것이 거의 확실합니다.
- 상태 업데이트가 예약된 경우 React는 가까운 시일 내에 해당 상태 업데이트를 실행하며, 업데이트 후 렌더 패스를 트리거합니다.
- 렌더 패스 중에 상태가 실제로 다른지 여부를 확인합니다.그 경우, 애플리케이션의 가상 DOM과 비교해, 애플리케이션의 가상 DOM에서 실행할 필요가 있는 추가/갱신/삭제 조작 세트를 특정해, 새로운 일시와 같은 상태가 됩니다.다음으로 이러한 조작을 적용하여 임시 가상 DOM을 다시 폐기합니다.
- 그런 다음 가상 DOM의 현재 모습을 반영하도록 UI를 업데이트합니다.
- 그 후, 유저가 실제로 보고 있는 페이지에 DOM 가 갱신되어 입력 요소에 입력한 내용이 표시됩니다.
이는 일반 브라우저 모델과는 완전히 다릅니다.사용자가 먼저 텍스트 상자에 입력하고 코드가 "그 텍스트 상자의 현재 값"이라고 판독하는 대신 React는 이미 상태를 파악하고 이벤트를 사용하여 상태를 먼저 업데이트하며 UI 업데이트로 이어집니다..
그리고 이 모든 것이 효과적으로 즉시 이루어지기 때문에 사용자에게는 임의의 웹 페이지와 같은 방식으로 입력 요소에 텍스트를 입력하는 것처럼 보이지만, 후드 아래에서는 같은 결과가 나오지만 더 이상 다를 수 없습니다.
그럼 이제 React 요소에서 값을 얻는 방법에 대해 알아보겠습니다.
컴포넌트 클래스 및 ES6(React 16+ 및 15.5 이행)
16 15의에서는 React 16( 15 15.5로 소프트 스타트),createClass콜은 지원되지 않게 되어 클래스 구문을 사용해야 합니다. 두 됩니다.명백한 과 더불어 2개의 클래스 도 바뀌게다가 2개의 클래스 구문입니다.명백한 클래스 구문과this이 '''입니다.createClass「 free를 사용할 수 있기 에, 동작하고 있는 을 확인하려면 , 「arrow」사용하고 해 주세요.this를 보존하는 onWhatever:onChange하다
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.reset();
}
reset() {
// Always set the initial state in its own function, so that
// you can trivially reset your components at any point.
this.state = {
inputValue: ''
};
}
render() {
return (
// ...
<input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
// ...
);
},
updateInputValue(evt) {
const val = evt.target.value;
// ...
this.setState({
inputValue: val
});
}
});
또 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 그리고bind다음과 같이 모든 이벤트 처리 기능에 대해 컨스트럭터로 이동합니다.
constructor(props) {
super(props);
this.handler = this.handler.bind(this);
...
}
render() {
return (
...
<element onclick={this.handler}/>
...
);
}
그러지마세요.
하시는 거의 모든 시간bind「잘못하고 있다」라는 속담이 적용됩니다.클래스는 이미 오브젝트 프로토타입을 정의하고 있기 때문에 인스턴스 컨텍스트를 이미 정의하고 있습니다. 넣지 bind게다가 컨스트럭터내의 모든 함수 콜을 복제하는 대신에 통상의 이벤트 전송을 사용해 주세요.복제는 버그 표면을 증가시켜, 에러를 추적하는 것을 훨씬 어렵게 하기 때문입니다.이는 코드를 호출하는 장소가 아닌 컨스트럭터에 문제가 있을 수 있기 때문입니다.
"하지만 계속적으로 리렌더 기능을 만들고 버립니다!"라고 말합니다.그게 사실일 수도 있지만 눈치채지 못할 겁니다.사용자도 마찬가지입니다.이벤트 핸들러의 가비지 컬렉션이 퍼포먼스의 보틀 넥이라면, 이미 많은 것이 잘못되어 설계를 재검토할 필요가 있습니다.React가 이렇게 잘 동작하는 이유는 UI 전체를 갱신하지 않고 변경되는 부분만 갱신하기 때문입니다.또한 적절하게 설계된 UI에서는 대부분의 UI가 변경되지 않는 데 소비하는 시간이 되기 때문입니다.UI의 작은 부분이 업데이트에 소비하는 시간을 크게 초과합니다.
후크가 있는 기능 컴포넌트(React 16.8+)
16컴포넌트(즉 그대로 일부 React 16.8을 )propsclass를 작성하지 않고 컴포넌트 클래스의 인스턴스인 것처럼 인수가 사용될 수 있기 때문에) 훅을 사용하여 상태를 지정할 수도 있습니다.
코드가 없고 를 할 수 .useState 후크 및그 업데이트예시와 단, "universal"은 "universal"로 되어 있지 .setState함수 호출 및 작업 중인 각 값에 대해 하나의 전용 상태 설정기 사용:
import { useId, useState } from 'react';
function myFunctionalComponentFunction(props) {
const id = useId();
const [input, setInput] = useState(props?.value ?? '');
return (
<div>
<label htmlFor={id}>Please specify:</label>
<input id={id} value={input} onInput={e => setInput(e.target.value)}/>
</div>
);
}
이전에는 클래스 컴포넌트와 함수 컴포넌트의 비공식적인 구분은 "기능 컴포넌트는 상태가 없다"였기 때문에 더 이상 그 뒤에 숨길 수 없습니다.기능 컴포넌트와 클래스 컴포넌트의 차이는 매우 잘 작성된 리액션 매뉴얼에서 여러 페이지에 걸쳐 찾을 수 있습니다(라이너 설명의 단축키는 없습니다).o 편리한 오역!)을 읽으면 자신이 무엇을 하고 있는지 알 수 있으며, 따라서 자신이 안고 있는 문제로부터 자신을 프로그램하기 위해 최선의 솔루션(그것이 무엇을 의미하는지)을 선택했는지 알 수 있습니다.
및 ES5를 createClass
올바르게 동작하기 위해 컴포넌트에는 상태 값이 있습니다.이 값은 입력 필드를 통해 표시됩니다.이 값을 갱신하려면 UI 요소가 변경 이벤트를 컴포넌트로 다시 전송하도록 해야 합니다.
var Component = React.createClass({
getInitialState: function() {
return {
inputValue: ''
};
},
render: function() {
return (
//...
<input value={this.state.inputValue} onChange={this.updateInputValue}/>
//...
);
},
updateInputValue: function(evt) {
this.setState({
inputValue: evt.target.value
});
}
});
리액트에게 '리액트'를.updateInputValue 함수, "사용"을 사용합니다.setState일정 및 업데이트 일정을 합니다.render을 두드리다.this.state.inputValue상태를 업데이트한 후 다시 렌더링하면 사용자가 입력한 내용에 따라 업데이트 텍스트가 표시됩니다.
코멘트에 근거한 부록
UI 입력이 상태 값을 나타내는 경우(사용자가 탭을 중간에 닫은 후 탭이 복원될 경우 어떻게 되는지 고려합니다).그들이 채운 모든 가치들을 복원해야 할까요?만약 그렇다면, 그것은 주(州)이다.)큰 폼에는 수십 또는 100개의 입력 폼이 필요하다고 느낄 수 있지만, React는 UI를 유지관리 가능한 방법으로 모델링하는 것입니다. 즉, 100개의 독립된 입력 필드가 없고, 관련된 입력 그룹이 있기 때문에 컴포넌트 내의 각 그룹을 캡처한 후 "마스터" 폼을 그룹 모음으로 만듭니다.
MyForm:
render:
<PersonalData/>
<AppPreferences/>
<ThirdParty/>
...
또한 이는 거대한 단일 양식 구성 요소보다 훨씬 쉽게 유지 관리할 수 있습니다.그룹을 상태 유지보수가 있는 구성 요소로 분할합니다. 여기서 각 구성 요소는 한 번에 몇 개의 입력 필드만 추적합니다.
코드를 모두 쓰는 것이 귀찮다고 느낄 수도 있지만, 이것은 잘못된 절약입니다.미래의 당신을 포함한 개발자는 코드 경로를 추적하기 훨씬 쉬워지기 때문에 모든 입력이 명시적으로 연결되어 있는 것을 보고 큰 이익을 얻을 수 있습니다.그러나 언제든지 최적화할 수 있습니다.예를 들어, 스테이트 링커를 쓸 수 있습니다.
MyComponent = React.createClass({
getInitialState() {
return {
firstName: this.props.firstName || "",
lastName: this.props.lastName || ""
...: ...
...
}
},
componentWillMount() {
Object.keys(this.state).forEach(n => {
let fn = n + 'Changed';
this[fn] = evt => {
let update = {};
update[n] = evt.target.value;
this.setState(update);
});
});
},
render: function() {
return Object.keys(this.state).map(n => {
<input
key={n}
type="text"
value={this.state[n]}
onChange={this[n + 'Changed']}/>
});
}
});
다음과 같은 방법으로 입력 필드 값을 얻을 수 있었습니다.
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
username : ''
}
this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
updateInput(event){
this.setState({username : event.target.value})
}
handleSubmit(){
console.log('Your input value is: ' + this.state.username)
//Send state to the server code
}
render(){
return (
<div>
<input type="text" onChange={this.updateInput}></input>
<input type="submit" onClick={this.handleSubmit} ></input>
</div>
);
}
}
//output
//Your input value is: x
MyComponent extensions React 클래스에서 생성자를 사용해야 합니다.요소
constructor(props){
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
그러면 타이틀의 결과를 얻을 수 있습니다.
리액트 16에서는
<Input id="number"
type="time"
onChange={(evt) => { console.log(evt.target.value); }} />
주다<input>한
<input id='title' ...>
const title = document.getElementById('title').value
키를 누를 때마다 React 상태를 지속적으로 업데이트할 필요가 없습니다.필요할 때 가치를 얻을 수 있습니다.
기능 구성 요소:-
export default function App(){
const [state, setState] = useState({
value:'',
show:''
});
const handleChange = (e) => {
setState({value: e.target.value})
}
const submit = () => {
setState({show: state.value})
}
return(
<>
<form onSubmit={()=>submit()}>
<input type="text" value={state.value} onChange={(e)=>handleChange(e)} />
<input type="submit" />
</form>
<h2>{state.show}</h2>
</>
)}
export default class App extends React.Component{
state={
value:'',
show:''
}
handleChange=(e)=>{
this.setState({value:e.target.value})
}
submit=()=>{
this.setState({show:this.state.value})
}
render(){
return(
<>
<form onSubmit={this.submit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" />
</form>
<h2>{this.state.show}</h2>
</>
)
}
}
는 이것을 했다.this에 )updateInputValue(evt) 함께
this.updateInputValue = this.updateInputValue.bind(this);
, 입력 ", " "value={this.state.inputValue}이 아닌 되었습니다...좋은 생각이 아닌 것으로 판명되었습니다.
다음은 babel ES6의 전체 코드입니다.
class InputField extends React.Component{
constructor(props){
super(props);
//this.state={inputfield: "no value"};
this.handleClick = this.handleClick.bind(this);
this.updateInputValue = this.updateInputValue.bind(this);
}
handleClick(){
console.log("trying to add picture url");
console.log("value of input field : "+this.state.inputfield);
}
updateInputValue(evt){
//console.log("input field updated with "+evt.target.value);
this.state={inputfield: evt.target.value};
}
render(){
var r;
r=<div><input type="text" id="addpixinputfield"
onChange={this.updateInputValue} />
<input type="button" value="add" id="addpix" onClick={this.handleClick}/>
</div>;
return r;
}
}
기능 내 컴포넌트
useState(상태)
스테이트풀값과 이를 갱신하는 함수를 반환합니다. 렌더링 중 된 상태 " " " "(state)는 첫 인수로 .(initialState) . 。setState기능하다새로운 상태 값을 받아들여 컴포넌트의 재렌더를 큐잉합니다.
src ---> https://reactjs.org/docs/hooks-reference.html#usestate
useRef
useRef 、 「 「 」 、 「 」를 가지는 를 반환합니다..current "로 됩니다.(initialValue)반환된 오브젝트는 컴포넌트의 라이프 타임 전체에 걸쳐 유지됩니다.
src ---> https://reactjs.org/docs/hooks-reference.html#useref
import { useRef, useState } from "react";
export default function App() {
const [val, setVal] = useState('');
const inputRef = useRef();
const submitHandler = (e) => {
e.preventDefault();
setVal(inputRef.current.value);
}
return (
<div className="App">
<form onSubmit={submitHandler}>
<input ref={inputRef} />
<button type="submit">Submit</button>
</form>
<p>Submit Value: <b>{val}</b></p>
</div>
);
}
당신의 오류는 당신이 클래스를 사용했기 때문이며, 클래스를 사용할 때 우리는 제대로 작동하기 위해 함수를 This로 바인딩해야 합니다.어쨌든 왜 우리가 "이것"을 해야 하는지, 그리고 "이것"을 Javascript로 해야 하는지 많은 튜토리얼이 있습니다.
송신 버튼을 수정하면, 다음과 같이 동작합니다.
<button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>
또한 콘솔에 해당 입력 값을 표시하려면 var title = this.dis.value를 사용해야 합니다.
리액트 버전: 17.0.1
a) 기능 컴포넌트 사용
b) 후크를 사용하여 상태를 관리합니다.useState().
위와 같은 코드 쓰기 및 실행:
import React, {useState} from 'react';
const InputElement = () => {
const [inputText, setInputText] = useState('');
return (
<div>
<input
onChange={(e) => {
setInputText(e.target.value);
}
}
placeholder='Enter Text'
/>
{inputText}
</div>
);
}
해결 방식 알고리즘은 양방향 데이터 바인딩과 유사합니다.
입력 <=> DATA_MODEL <=> 라벨_본문
// On the state
constructor() {
this.state = {
email: ''
}
}
// Input view ( always check if property is available in state {this.state.email ? this.state.email : ''}
<Input
value={this.state.email ? this.state.email : ''}
onChange={event => this.setState({ email: event.target.value)}
type="text"
name="emailAddress"
placeholder="johdoe@somewhere.com" />
가장 간단한 방법은 화살표 기능을 사용하는 것입니다.
화살표 기능이 있는 코드
export default class MyComponent extends React.Component {
onSubmit = (e) => {
e.preventDefault();
var title = this.title;
console.log(title);
}
render(){
return (
...
<form className="form-horizontal">
...
<input type="text" className="form-control" ref={(c) => this.title = c} name="title" />
...
</form>
...
<button type="button" onClick={this.onSubmit} className="btn">Save</button>
...
);
}
};
'onChange' 함수를 추가하지 않고도 입력값을 얻을 수 있습니다.
입력 요소에 '참조 특성'을 추가합니다.
그런 다음 이.refs를 사용하여 필요할 때 입력 값을 가져옵니다.
, 그럼 이렇게 바꿔주세요.ref='title'를 삭제합니다.name='title' 다음 " " " 를 삭제합니다.var title = this.title그리고 다음과 같이 적습니다.
console.log(this.refs.title.value)
ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ,.bind(this)로로 합니다.this.onSubmit
였지만, (이것이)가 아니라 (이것)이 효과가 onClick는 ★★★★★★★★★★★★★★★★★★★★★★★★★.onSubmit={...} 되었다.<form onSubmit={...} ></form>))
클래스 구성 요소를 사용하는 경우 세 단계만 수행하면 됩니다. 먼저 입력 파일에 대한 상태를 선언하면 됩니다(예: this.state = {name:`}).둘째, setName()의 예에서 상태를 변경하는 함수를 작성하고 마지막으로 입력 jsx를 작성해야 합니다. 예를 들어 < input value = {this.name } onChange = { this } 입니다.setName}/>
import React, { Component } from 'react'
export class InputComponents extends Component {
constructor(props) {
super(props)
this.state = {
name:'',
agree:false
}
this.setName = this.setName.bind(this);
this.setAgree=this.setAgree.bind(this);
}
setName(e){
e.preventDefault();
console.log(e.target.value);
this.setState({
name:e.target.value
})
}
setAgree(){
this.setState({
agree: !this.state.agree
}, function (){
console.log(this.state.agree);
})
}
render() {
return (
<div>
<input type="checkbox" checked={this.state.agree} onChange={this.setAgree}></input>
< input value={this.state.name} onChange = {this.setName}/>
</div>
)
}
}
export default InputComponents
export default class MyComponent extends React.Component {
onSubmit(e) {
e.preventDefault();
var title = this.title.value; //added .value
console.log(title);
}
render(){
return (
...
<form className="form-horizontal">
...
<input type="text" className="form-control" ref={input => this.title = input} name="title" />
...
</form>
...
<button type="button" onClick={this.onSubmit} className="btn">Save</button>
...
);
}
};
제어되지 않은 필드 사용:
export default class MyComponent extends React.Component {
onSubmit(e) {
e.preventDefault();
console.log(e.target.neededField.value);
}
render(){
return (
...
<form onSubmit={this.onSubmit} className="form-horizontal">
...
<input type="text" name="neededField" className="form-control" ref={(c) => this.title = c}/>
...
</form>
...
<button type="button" className="btn">Save</button>
...
);
}
};
언급URL : https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs
'programing' 카테고리의 다른 글
| XAMPP에서 phpMyAdmin을 사용하여 "구성에서 정의된 controluser에 대한 연결에 실패했습니다." (0) | 2022.09.12 |
|---|---|
| ORDER BY와 GROUP BY를 함께 사용 (0) | 2022.09.12 |
| 1개의 쿼리로 여러 개의 문을 노드 검출 (0) | 2022.09.12 |
| 데이터베이스의 관점에서 REFRESH와 MERGE는 무엇을 의미합니까? (0) | 2022.09.12 |
| 열 이름을 기준으로 팬더 데이터프레임의 열 정렬 (0) | 2022.09.12 |