React.js:하나의 onChange 핸들러를 사용하여 다른 입력 식별
이에 대한 올바른 접근 방법이 무엇인지 궁금해 합니다.
var Hello = React.createClass({
getInitialState: function() {
return {total: 0, input1:0, input2:0};
},
render: function() {
return (
<div>{this.state.total}<br/>
<input type="text" value={this.state.input1} onChange={this.handleChange} />
<input type="text" value={this.state.input2} onChange={this.handleChange} />
</div>
);
},
handleChange: function(e){
this.setState({ ??? : e.target.value});
t = this.state.input1 + this.state.input2;
this.setState({total: t});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
물론 개별 handleChange 함수를 생성하여 각 입력을 처리할 수 있지만 이는 그다지 좋은 방법이 아닙니다.마찬가지로 컴포넌트를 개별 입력용으로만 작성할 수 있지만 이렇게 할 수 있는 방법이 있는지 알아보려고 합니다.
다음과 같은 표준 HTML 속성을 고수할 것을 제안합니다.input입력을 식별하기 위한 요소.또한 "total"을 별도의 값으로 유지할 필요가 없습니다. 이는 "total"이 상태에 다른 값을 추가하여 합성할 수 있기 때문입니다.
var Hello = React.createClass({
getInitialState: function() {
return {input1: 0, input2: 0};
},
render: function() {
const total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
<input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
</div>
);
},
handleChange: function(e) {
this.setState({[e.target.name]: e.target.value});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
를 사용할 수 있습니다..bind매개 변수를 사전 빌드하는 방법handleChange방법.예를 들어 다음과 같습니다.
var Hello = React.createClass({
getInitialState: function() {
return {input1:0,
input2:0};
},
render: function() {
var total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text" value={this.state.input1}
onChange={this.handleChange.bind(this, 'input1')} />
<input type="text" value={this.state.input2}
onChange={this.handleChange.bind(this, 'input2')} />
</div>
);
},
handleChange: function (name, e) {
var change = {};
change[name] = e.target.value;
this.setState(change);
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
(저도 만들었습니다)total권장되는 작업이기 때문에 렌더링 시 계산됩니다.)
그onChange이벤트 버블...다음과 같은 작업을 수행할 수 있습니다.
// A sample form
render () {
<form onChange={setField}>
<input name="input1" />
<input name="input2" />
</form>
}
또한 setField 메서드는 다음과 같습니다(ES2015 이상을 사용하는 경우).
setField (e) {
this.setState({[e.target.name]: e.target.value})
}
이것과 비슷한 것을 여러 앱에서 사용하고 있습니다만, 매우 편리합니다.
권장되지 않는 솔루션
valueLink/checkedLink일부 사용자에게 혼란을 주기 때문에 코어 리액트에서는 권장되지 않습니다.최신 버전의 React를 사용하면 이 답변이 작동하지 않습니다.하지만 마음에 들면, 자신의 것을 만들어 내는 것으로 간단하게 모방할 수 있습니다.Input요소
오래된 답변 내용:
React의 양방향 데이터 바인딩 도우미를 사용하면 원하는 것을 훨씬 쉽게 달성할 수 있습니다.
var Hello = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {input1: 0, input2: 0};
},
render: function() {
var total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text" valueLink={this.linkState('input1')} />;
<input type="text" valueLink={this.linkState('input2')} />;
</div>
);
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
쉽죠?
http://facebook.github.io/react/docs/two-way-binding-helpers.html
다음과 같이 할 수도 있습니다.
...
constructor() {
super();
this.state = { input1: 0, input2: 0 };
this.handleChange = this.handleChange.bind(this);
}
handleChange(input, value) {
this.setState({
[input]: value
})
}
render() {
const total = this.state.input1 + this.state.input2;
return (
<div>
{total}<br />
<input type="text" onChange={e => this.handleChange('input1', e.target.value)} />
<input type="text" onChange={e => this.handleChange('input2', e.target.value)} />
</div>
)
}
기능 컴포넌트의 예를 찾고 있는 사람은,
import React, { useState } from "react";
export default function Exapmle() {
const [userState, setUserState] = useState({
firstName: "",
lastName: ""
})
const handleChange = (e)=>{
const value = e.target.value;
setUserState({
...userState,
[e.target.name]: value
});
}
return (
<form>
<label>
First name
<input type="text" name="firstName" value={userState.firstName}
onChange={handleChange}
/>
</label>
<label>
Last name
<input type="text" name="lastName" value={userState.lastName}
onChange={handleChange}
/>
</label>
</form>
);
}
스페셜을 사용할 수 있습니다.React호출된 속성ref실제 DOM 노드를 대조합니다.onChange이벤트 사용React의getDOMNode()기능:
handleClick: function(event) {
if (event.target === this.refs.prev.getDOMNode()) {
...
}
}
render: function() {
...
<button ref="prev" onClick={this.handleClick}>Previous question</button>
<button ref="next" onClick={this.handleClick}>Next question</button>
...
}
@Vigril Inm4ce
멀티필드 폼의 경우 React의 주요 기능인 컴포넌트를 사용하는 것이 좋습니다.
프로젝트에서는 최소한의 가치 지주를 가지고 입력 텍스트 필드의 일반적인 동작을 처리하는 TextField 컴포넌트를 만듭니다.이렇게 하면 값 상태를 업데이트할 때 필드 이름을 추적할 필요가 없습니다.
[...]
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
[...]
각 자녀의 가치를 추적할 수 있습니다.input의 ""를 InputField의 「」의 하는 컴포넌트.input를 들면, 「 」라고 하는 것은InputField하다
var InputField = React.createClass({
getInitialState: function () {
return({text: this.props.text})
},
onChangeHandler: function (event) {
this.setState({text: event.target.value})
},
render: function () {
return (<input onChange={this.onChangeHandler} value={this.state.text} />)
}
})
다음으로 각 의 .input 경우 내에서 할 수 .InputField각 자식 구성 요소를 모니터링하기 위해 부모 상태에 별도의 값을 생성하지 않고 구성 요소를 모니터링합니다.
저는 그 문제에 대해 정말 간단한 해결책을 제시하겠습니다. 두 가지 가정해 .username ★★★★★★★★★★★★★★★★★」password하지만 우리는 우리의 핸들이 쉽고 범용적이기를 원합니다. 그래서 우리는 그것을 재사용할 수 있고 보일러 플레이트 코드를 쓰지 않을 수 있습니다.
I. 당사의 양식:
<form>
<input type="text" name = "username" onChange={this.onChange} value={this.state.username}/>
<input type="text" name = "password" onChange={this.onChange} value={this.state.password}/>
<br></br>
<button type="submit">Submit</button>
</form>
는 우리의 II를 싶다. 우리의 건설업자는 우리가 구하고자 하는username ★★★★★★★★★★★★★★★★★」password쉽게 접근할 수 있습니다.
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
롭고 "입니다. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★onChange이벤트는 다음을 기반으로 합니다.
onChange(event) {
let inputName = event.target.name;
let value = event.target.value;
this.setState({[inputName]:value});
event.preventDefault();
}
설명하겠습니다.
되었을 때 1. 경경 1 1 1onChange(event)
2. 다음으로 필드의 name 파라미터와 값을 가져옵니다.
let inputName = event.target.name; ex: username
let value = event.target.value; ex: itsgosho
3. name 파라미터에 따라 컨스트럭터의 상태로부터 값을 취득하여 다음 값으로 갱신합니다.
this.state['username'] = 'itsgosho'
4. 여기서 주의할 점은 필드 이름이 해당 주의 파라미터와 일치해야 한다는 것입니다.
내가 어떻게든 누군가를 도와줬으면 좋겠어:)
상태 키는 입력 필드 이름과 같아야 합니다.그런 다음 handleEvent 메서드로 이 작업을 수행할 수 있습니다.
this.setState({
[event.target.name]: event.target.value
});
Hi는 ssorallen 답변이 향상되었습니다.함수를 바인드하지 않아도 입력에 액세스할 수 있으므로 함수를 바인딩할 필요가 없습니다.
var Hello = React.createClass({
render: function() {
var total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text"
value={this.state.input1}
id="input1"
onChange={this.handleChange} />
<input type="text"
value={this.state.input2}
id="input2"
onChange={this.handleChange} />
</div>
);
},
handleChange: function (name, value) {
var change = {};
change[name] = value;
this.setState(change);
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
상태 객체
const [values, setValues] = useState({
email: "",
password: "",
});
상태를 변화시키는 함수
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};
입력 변경 시 "이름"을 사용하여 위 함수를 호출합니다.
<input
onChange={handleChange("email")}
value={email}
className="form-control"
type="email"
/>
언급URL : https://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler
'programing' 카테고리의 다른 글
| bash 스크립트로 json 파일 변경 (0) | 2023.03.18 |
|---|---|
| VSCode preceer가 TypeScript React에서 Import에 '가치'를 추가함 (0) | 2023.03.18 |
| create-react-app에서 src 폴더를 다른 폴더로 변경하려면 어떻게 해야 합니까? (0) | 2023.03.13 |
| 로컬 mongo db를 시작/시작할 수 없습니다. (0) | 2023.03.13 |
| 127.0.0.1:27017에 연결하지 못했습니다. 이유: errno:111 연결이 거부되었습니다. (0) | 2023.03.13 |