li、state、props、refs (React 16 二)

※li

li 有個 index 屬性，不寫在 console 會有警告

const array = ["aaa", "bbb", "ccc"];
const arr = [];
array.forEach((data, i) => arr.push(<li key={i}>{data}</li>));
    
ReactDOM.render(arr ,document.querySelector("#div1"));

※此種方式還要再宣告一個陣列，如不想宣告，還可以用如下的方式

※

const array = ["aaa", "bbb", "ccc"];
ReactDOM.render(
    <ul>
        {
            array.map((data, i) => {
                return <li key={i}>{data}</li>
            })
        }
    </ul>,
    document.querySelector("#div1")
);

※

※state

setState 為關鍵的方法，不能改
在 this.state 裡宣告，不一定要叫 state
組件內部使用

class Btn extends React.Component {
    constructor(p) {
        super(p)
        console.log(this);
        this.state = {bln:true}
        this.changeText = this.changeText.bind(this)
    }
    
    changeText() {
        this.setState({bln:!this.state.bln})
    }
    
    render() {
        return <button onClick={this.changeText}>{this.state.bln?'XXX':'OOO'}</button>
    }
}
    
ReactDOM.render(<Btn />, document.querySelector("#d1"))

※可看到 this 印出來，有 state、props、refs…等，這些關鍵字是不能改的

※要改變狀態一定要用 setState 方法，不能使用 this.setState.id = !this.state.id，雖然不會報錯，但沒有作用

※render 是覆寫 React.Componet 裡的方法；而 changeText 是自定義的方法，所以自定義的還得在 constructor 加上 bind 才可以使用，也可以寫在 onClick 裡，如 onClick={this.changeText.bind(this)}

※props

ReactDOM.render 的第一個參數傳進來的，可以用 props 取得

class Animal extends React.Component {
    constructor(p) {
        super(p)
    }
    
    render() {
        console.log(this)
        return (
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.price}</li>
            </ul>
        )
    }
}
    
Animal.defaultProps = { // 給預設值
    name: '動物名',
    price:500
}
    
Animal.propTypes = { // 給型態，如果不是必要，最後就不需要 isRequired
    name:PropTypes.string.isRequired,
    price:PropTypes.number.isRequired
}
    
const animal1 = {
    name:'老虎',
    price:200
}
    
const animal2 = {
    name:'老鼠',
    price:50
}
    
ReactDOM.render(<Animal {...animal1} />, document.querySelector("#d1"))
ReactDOM.render(<Animal name={animal2.name} />, document.querySelector("#d2"))

※想使用 propTypes，必需得有 prop-types.js

※refs

類似以前的 id
在 ref = 宣告

class Reference extends React.Component {
    constructor(p) {
        super(p)
        this.handleBlure = this.handleBlure.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick() {
        console.log(this.msgVue.value)
    }
    
    handleBlure(e) {
        alert(e.target.value)
    }
    
    render() {
        return (
            <div>
                <input ref={i => this.msgVue=i} />
                <button onClick={this.handleClick}>按我</button>
                <input placeholder="預設值" onBlur={this.handleBlur} />
            </div>
        )
    }
}
    
ReactDOM.render(<Reference />, document.querySelector("#d1"))

※也可以使 ref="xxx"，取值就用 this.refs.xxx.value 即可