React 組件內、組件間傳值

這裏組件間參數傳遞只介紹利用回調傳遞（ref不介紹）即子組件向父組件傳值。（父組件向子組件傳值用props,層級較深或無關聯組件間傳參即需要全局數據管理參考react-redux、MobX等）

組件內（無默認參值和需要默認參值情況）

 

class Demo extends  Component{
        constructor(props){
                super(props);
                this.state={
                    value:'',
                    externalValue:''
                };
            }


    onClick = (value) =>{
      console.log(`點擊${value}` );
      this.forceUpdate();
    };


    OnChange = value => (e) =>{
        console.log(value);
        console.log(e.target.value);
        this.setState({value: e.target.value})
    };


    render(){
        return(
            <div>
                <div>
                    <input value={this.state.value} onChange={this.OnChange(1)}/>
                </div>
                <div>
                    <button onClick={()=>this.onClick(2)}>11</button>
                </div>
            </div>
        );
    }
}

注意兩種情況爲避免函數立即執行的寫法

組件間（無默認參值和需要默認值情況）

class Demo extends  Component{
        constructor(props){
                super(props);
                this.state={
                    value:'',
                    externalValue:''
                };
            }


    onClick = (value) =>{
      console.log(`點擊${value}` );
      this.forceUpdate();
    };


    OnChange = value => (e) =>{
        console.log(value);
        console.log(e.target.value);
        this.setState({value:e.target.value})
    };


    OnExterChange = (value ,e) =>{
        console.log(value);
        this.setState({externalValue:e.target.value})
    };


    onExterClick =(value)=>{
        console.log(`點擊${value}` );
        this.forceUpdate();
    };


    render(){
        return(
            <div>
                <div>
                    <input value={this.state.value} onChange={this.OnChange(1)}/>
                </div>
                <div>
                    <button onClick={()=>this.onClick(2)}>11</button>
                </div>
                <Demo2 
                    externalValue={this.state.externalValue} 
                    OnExterChange={this.OnExterChange} 
                    onExterClick={this.onExterClick}
                />
            </div>
        );
    }
}


class Demo2 extends Component{
    constructor(props){
        super(props);
    }


    OnChange = value =>(e)=>{
      this.props.OnExterChange(value ,e);
    };


    render(){
        return (
            <div>
                <div>
                    <input value={this.props.externalValue} onChange={this.OnChange(3)}/>
                </div>
                <div>
                    <button onClick={()=>this.props.onExterClick(4)}>11</button>
                </div>
            </div>
        )
    }
}

無默認情況下組件間、組件內差別不大。有默認參數時先把默認參數‘拿出來’    再傳給父組件

onChange = value =>(e)=>{
      this.props.OnExterChange(value, e);
};
//方式相同
function onChange (value) {
    return function(e) {
         this.props.OnExterChange(value, e);
    }
}