react子元件給父元件傳值

子元件給父元件傳值：

子元件的代碼：

render() {
        return (
            <div>
                {/*當input的值改變時将子元件的值傳給父元件，toFatherValue是父元件一個屬性，用來接口子元件的值*/}
                <input onChange={(e) => {
                    this.props.toFatherValue( e.target.value);
                }}/>
                {/*點選按鈕是給父元件傳值*/}
                <button type="button" onClick={this.props.toFatherValue.bind(this, "我是子元件EventComponet的值")}>向父元件傳值</button>
            </div>
        )
    }
           

父元件代碼

render() {
        var name = "<span style='color: #FF0000;'>張三</span>";
        return (
            <div>
                {/*父元件接收子元件的值*/}
                <EventComponet toFatherValue={this.getChildValue.bind(this)}/>
                <div>從父元件接收過來的值:{this.state.childValue}</div>
            </div>
        )
    }

/**
     * 擷取從子元件傳遞過來的值
     */
    getChildValue(val) {
        console.log("getChildValue", val);
        this.setState({
            childValue:val
        })
    }
           

子元件給父元件傳值另一種寫法

//子元件代碼
render() {
        return (
            <div>
                {/*當input的值改變時将子元件的值傳給父元件，toFatherValue是父元件一個屬性，用來接口子元件的值*/}
                <input onChange={this.props.toFatherValue}/> 
            </div>
        )
    }
//父元件代碼
 render() {
        return (
            <div> {/*父元件接收子元件的值*/}
                <EventComponet toFatherValue={this.getChildValue.bind(this)}/>
                <div>從父元件接收過來的值:{this.state.childValue}</div>
            </div>   )
    }
	/**
     * 擷取從子元件傳遞過來的值
     */
 getChildValue(e) {
        console.log("getChildValue", e.target.value);
        this.setState({
            childValue:e.target.value
        })
    }