react boottstrap 결합 댓 글 기능 실현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<link rel="stylesheet" href="js/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//
var Content = React.createClass({
getInitialState:function () {
return {
inputText:""
}
},
handleChange:function (event) {
this.setState({
inputText:event.target.value
});
},
handleSubmit:function () {
console.log(" :"+this.props.selectName+", :"+this.state.inputText);
//
this.refs.comm.value = "";
},
render:function () {
return (
<div>
<textarea ref="comm" className="form-control" onChange={this.handleChange} placeholder=" ">
</textarea>
<br/>
<button className="btn btn-primary" onClick={this.handleSubmit}> </button>
</div>
);
}
});
//
var Comment = React.createClass({
getInitialState:function () {
return {
names:[" "," "," "],
selectName:" ",
style:{
"width":"400px",
"margin":"0 auto"
}
};
},
handleSelect:function (event) {
this.setState({
selectName:event.target.value
});
},
render:function () {
var options = [];
for(var option in this.state.names){
options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)
};
return (
<div className="panel panel-body panel-primary" style={this.state.style}>
<div className="form-group">
<select onChange={this.handleSelect} className="form-control">
{options}
</select>
<br/>
<Content selectName={this.state.selectName}/>
</div>
</div>
);
}
});
ReactDOM.render(<Comment/>,document.getElementById("app"));
</script>
</body>
</html>
더 많은 튜 토리 얼 이 정리 되 었 습 니 다.Bootstrap 기초 튜 토리 얼주제 에서 클릭 하여 공부 하 는 것 을 환영 합 니 다.
만약 에 여러분 이 더 깊이 공부 하고 싶다 면여기,이곳을 클릭 하여 공 부 를 할 수 있 습 니 다.그리고 여러분 에 게 두 가지 멋 진 주 제 를 추가 할 수 있 습 니 다.Bootstrap 학습 강좌Bootstrap 실전 튜 토리 얼
본 고 는 모두 가장 간단 한 사례 를 통 해 사례 에서 관련 된 구조 요점 을 분석 하고 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
