1. 程式人生 > >react狀態的使用:實現一個文字框點選按鈕之前是文字框 點選以後變成密碼框 並且按鈕的內容也改變

react狀態的使用:實現一個文字框點選按鈕之前是文字框 點選以後變成密碼框 並且按鈕的內容也改變

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'))