react狀態的使用:實現一個文字框點選按鈕之前是文字框 點選以後變成密碼框 並且按鈕的內容也改變
阿新 • • 發佈:2019-02-15
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out"></div>
</body>
<script src="js/a1.js" type="text/babel" charset="utf-8"></script>
<!--引外部需在伺服器環境下載入-->
</html>
js
class Demo extends React.Component{
constructor(props){
super(props)
this.state={
str:"shurukuang",
str1:"text"
}
}
tap(){
console.log(this.state)
if(this.state.str=="mima"){
this.setState({
str:"shurukuang",
str1:"text"
})
}else{
this.setState({
str:"mima",
str1:"password"
})
}
}
render(){
return(
<div>
<h1>es6 需求-明文密碼</h1>
<input type={this.state.str1}/>
<button onClick={this.tap.bind(this)} >{this.state.str}</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('out'))