http://codepen.io/AlexanderWeb00/pen/gLVbjL?editors=0010에 다음 스크립트가 있습니다.
class Wrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
}
handleFirstName(e) {
this.setState({name: e.target.value});
}
render(){
return (
<section>
<h2>welcome</h2>
<TShirt name={this.state.name} />
<FormButton action={this.handleFirstName.bind(this)} />
</section>
)
}
};
class TShirt extends React.Component {
render(){
return (
<section>
<div>
<p>Name: {this.props.name}</p>
</div>
</section>
)
}
};
class Extention extends React.Component {
render(){
return (
<section>
<div>
<p>badaboom</p>
</div>
</section>
)
}
};
var FormButton = React.createClass({
getInitialState: function() {
return {'submitted': false};
},
handleSubmit: function(e) {
e.preventDefault();
this.setState({'submitted': true });
},
render: function() {
if (this.state.submitted) {
return <Extention/>;
}
else {
return (
<form role="form" onSubmit={this.handleSubmit}>
<input type="text" />
<input type="submit" value="submit" />
</form>
);
}
}
});
ReactDOM.render(<Wrapper />, document.getElementById('app'));
입력에서 수집 한 값을 표시하고 싶습니다.
<input type="text" />
여기:
<p>Name: {this.props.name}</p>, inside the TShirt component.
현재는 양식이 제출 된 후 새 구성 요소 만 표시됩니다. Tshirt 구성 요소는 응용 프로그램을 빌드 할 때 더 많은 콘텐츠로 업데이트됩니다.
refs 를 사용 하여 tshirt 입력 필드의 값을 가져온 다음 action prop의 FormButton 구성 요소에 전달 된 콜백 함수를 호출 할 수 있습니다.
var FormButton = React.createClass({
getInitialState: function() {
return {'submitted': false};
},
handleSubmit: function(e) {
e.preventDefault();
var tshirt = this.refs.tshirt.value;
this.setState({submitted: true }, function() {
this.props.action(tshirt);
});
},
render: function() {
if (this.state.submitted) {
return <Extention/>;
}
else {
return (
<form role="form" onSubmit={this.handleSubmit}>
<input type="text" ref="tshirt" />
<input type="submit" value="submit" />
</form>
);
}
}
});
그런 다음 handleFirstName 메서드를 다음과 같이 수정합니다 .
handleFirstName(tshirt) {
this.setState({name: tshirt});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다