나는 js에 반응하는 것이 처음입니다.
내 양식에 여러 입력이 있고 React에서 제어 가능한 입력 접근 방식을 고려하여 다른 모든 입력에 대해 하나의 이벤트 처리기로 작업을 수행하려고합니다. 나는 스택 오버플로에서 몇 가지 참조를 가져 와서 이것에 왔습니다. 여전히 입력 상자에 쓸 수없는 이유를 파악할 수 없습니다.
다음은 내 코드입니다.
import React, {Component} from 'react';
import { Grid, Row, Col , Button } from 'react-bootstrap';
class ContactForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '' ,
email: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
render() {
return (
<form>
<input name="input1" value={this.state.name} onChange={this.handleChange}/>
<input name="input2" value={this.state.email} onChange={this.handleChange} />
<p>{this.state.name}, {this.state.email}</p>
</form>
);
}
}
export default ContactForm;
당신이 사용하는 name입력을 식별하는 속성이 있지만 렌더링 기능, "이름"대신 "입력 1"의 "이메일"과 "입력 2"에 잘못된 값을 읽고
대신이 작업을 수행 할 수 있습니다.
<input name="input1" value={this.state.input1} onChange={this.handleChange}/>
<input name="input2" value={this.state.input2} onChange={this.handleChange} />
또는
<input name="name" value={this.state.name} onChange={this.handleChange}/>
<input name="email" value={this.state.email} onChange={this.handleChange} />
또한 이것을 변경해야합니다.
this.state = {
name: '' ,
email: ''
};
첫 번째 옵션을 사용하는 경우 생성자에서.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다