c
c
class
Search…
⌃K

React基本概念1-2(新增元件)

第二階段

開始新增其他react元件
在components下,新增一個檔案 TextDisplay.js
import React, {Component} from 'react'
class TextDisplay extends Component{
}
export default TextDisplay
上面是引用react後建造一個空的class後將他輸出
接著我們要在class內寫入東西
import React, {Component} from 'react'
class TextDisplay extends Component{
render() {
return (
<div>
<div> 提醒:</div>
<div> React.js最外層只能有一個div</div>
</div>
)};
}
export default TextDisplay
接著在App.js中引用他
import React, { Component } from 'react';
import TextDisplay from './TextDisplay';
class App extends Component {
render() {
return (
<div>
<div>
Hello
</div>
<TextDisplay/>
</div>
)
}
}
export default App
試著將TextDisplay.js最外層的div刪掉,會出現錯誤,因為一個元件要有東西包住最外層。

使用state

TextDisplay.js
import React, { Component } from 'react'
class TextDisplay extends Component {
constructor() {
super()
this.state = {
inputText: 'this is apple'
}
}
render() {
return (
<div>
<input
type="text"
placeholder="This is going to be text"
value={this.state.inputText} />
</div>
)
}
}
export default TextDisplay

!!記得重新整理網頁,才會作用(因為這裡是constructor)

再來點選網頁中的input框發現沒辦法更改,原因是我們在input的prop中寫的是value把它改為defaultValue即可

為元件加入方法

import React, { Component } from 'react'
class TextDisplay extends Component {
constructor() {
super()
this.state = {
inputText: ' sdsxt'
}
}
handleChange() {
this.setState({inputText: 'hello'})
}
render() {
return (
<div>
<input
type="text"
placeholder="This is going to be text"
value={this.state.inputText}
onChange={() => this.handleChange()} />
</div>
)
}
}
export default TextDisplay
接著隨意輸入一個,輸入框都會變為hello字樣

在class中的方法如果有this的話他會不知道this是什麼,所以要在class 的constructor中把該方法綁進來

記得在constructor使用super()後才可用this
1.
import React, { Component } from 'react'
class TextInput extends Component {
constructor() {
super()
this.state = {
inputText: ' sdsxt'
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(){
this.setState({inputText:12});
}
render() {
return (
<div>
<input
type="text"
placeholder="This is going to be text"
value={this.state.inputText}
onChange={this.handleChange}
/>
</div>
)
}
}
export default TextInput
2.另一種寫法,是直接在DOM 的onchange中使用bind
onChange={this.handleChange.bind(this)}
接著在render上面寫
handleChange(){
...
}
3.第三種寫法(ES6的箭頭函數,最方便,因為會直接幫你綁定)
handleSubmit() {
}
<button onClick={()=>this.handleSubmit()}>Submit</button>
另外如要傳入事件e,記得兩邊()都要寫
<button onSubmit={(e)=>this.handleSubmit(e)}>
好處是不用再用bind

在class內所有的this都是指到那個class

所以要取得onchange時input內的value必須用e.target ,因為這裡不是DOM
貼上下面程式碼後,在輸入框中輸入,之後觀察console
import React, { Component } from 'react'
class TextDisplay extends Component {
constructor() {
super()
this.state = {
inputText: 'sdsxt'
}
}
handleChange(e) {
this.setState({inputText: 'hello'})
console.log(this);
console.log(e.target);
}
render() {
return (
<div>
<input
type="text"
placeholder="This is going to be text"
value={this.state.inputText}
onChange={(e) => this.handleChange(e)} />
</div>
)
}
}
export default TextDisplay