react--表單與互動
阿新 • • 發佈：2018-12-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React表單與互動</title> <script src='react.js'></script> <script src='react-dom.js'></script> <script src='babel.min.js'></script> <!-- <script src='jquery.min.js'></script> --> <!-- <script src='axios.min.js'></script> --> </head> <body> <div id='example'></div> <script type='text/babel'> /*建立元件*/ class Temp extends React.Component{ constructor(){ super(); this.state = { arr:[] } } /*請求資料*/ componentDidMount(){ /*jquery*/ /*儲存this值*/ /*let _this = this; $.ajax({ url:'http://localhost/data.php', success(data){ let text = JSON.parse(data); _this.setState({ arr:text }); } })*/ /*axios*/ /*axios.get('http://localhost/data.php') .then((res)=>{ this.setState({ arr:res.data }); })*/ /*fetch*/ fetch('http://localhost/data.php',{ method:'GET' }).then(res=>{ res.json() .then(res=>{ this.setState({ arr:res }); }) }) } render(){ let arrLi = []; this.state.arr.forEach((val,index)=>{ /*每一個數組項為一個li元素 注意：需要給key值，否則會報錯*/ arrLi.push(<li key={index}>{val}</li>); }) return ( <div> {/*此時無法輸入值，為受控元件*/} {/*<input type="text" value=''/>*/} {/*非受控元件,可以設定預設值且可以輸入，即在原本的屬性前加defaule且為小駝峰命名法*/} {/*<input type="text" defaultValue='123'/>*/} {/*react沒有類似於vue的v-show或者v-if的方法，故只能通過操作style來實現是否顯示*/} <div style={{display:this.state.arr.length>0?'none':'block'}}>暫時沒有資料....</div> <ul> {/*react可以自動展開陣列*/} {arrLi} </ul> </div> ) } } /*渲染元件*/ ReactDOM.render( <Temp />, document.getElementById('example') ); </script> </body> </html>
注意：需要在本地伺服器下進行操作
data.php檔案：
["中國","美國"]