react同級元件之間傳值

下面我們以一個評論的demo來講述如何實作這個效果:

這裡有一個比較重要的知識點就是關于props傳值， 關于props這裡我就不多進行闡述了

首先我們先規劃好整個代碼結構，commentInput存放的是我們輸入的使用者名資訊以及評論内容

class CommentApp extends Component {
    render() {
        return (
            <div>
                <CommentInput />   //輸入内容
                <CommentList />    // 展示清單
            </div>
        )
    }
}
           

正如以上我們所看到的， CommentInput, CommentList是同級的兩個元件， 那麼我們如何才能将CommentInput内輸入的值傳遞到CommentList中呢，從上述結構我們可以看到，CommentApp是充當了一個父元件的角色，是以它是可以充當橋接兩個元件的橋梁的，即當我們點選釋出按鈕的時候，我們就将CommentInput中輸入的評論内容傳遞給父元件，然後父元件再通過props将資料傳遞給CommentList.

接下來就來講述下如何将CommentInput的值傳遞給CommentList

1. 在父元件中定義一個函數，将這個函數通過props傳遞給CommentInput

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            info: []
        }
    }
    handleSubmit(con){
        console.log(con); //此處的con即表示接收到的評論内容
    }
    render() {
        return (
            <div>
                <CommentInput onSubmit={ this.handleSubmit.bind(this) }/>   //輸入内容
                <CommentList />    // 展示清單
            </div>
        )
    }
}
           

1. 如上述代碼， 這時候， 我們隻要在CommentInput中，擷取輸入框的内容， 并将值傳遞給onSubmit函數即可。

class CommentInput extends Component {
    handleClick() {
        let inpText = this.refs.inp.value;  //此處可以用state
        let txtText = this.refs.txt.value;  //此處可以用state
        if (this.props.onSubmit) {
            this.props.onSubmit({inpText, txtText});
        }
    }
    render() {
        return (
            <div>
                <input ref="inp" style={{
                    display: 'block',
                    width: 
                }}/>
                <textarea ref="txt" style={{
                    display: 'block',
                    width: ,
                    height: ,
                    marginTop: 
                }}></textarea>
                <button onClick={this.handleClick.bind(this)}>釋出</button>
            </div>
        )
    }
}
           

1. 接下來就是處理清單資料的展示了，父元件在拿到了評論内容後就可以将資料傳遞給CommentList了。

//此時，可以将CommentApp中的render修改為

render() {
    return (
        <div>
            <CommentInput onSubmit={ this.handleSubmit.bind(this) }/>   //輸入内容
            <CommentList listContent={ this.state.info }/>    // 展示清單
        </div>
    )
}
           

好了， 這樣我們就實作了簡單的釋出評論的功能了， 本次主要是記錄如何借助父級元件進而實作同級元件之間傳值。

完整代碼如下所示：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            info: []
        }
    }
    handleSubmit(con) {
        this.state.info.push(con);
        this.setState({info: this.state.info})
    }
    render() {
        return (
            <div>
                <CommentInput onSubmit={this.handleSubmit.bind(this)}/>
                <CommentList listContent={this.state.info}/>
            </div>
        )
    }
}

class CommentInput extends Component {
    handleClick() {
        let inpText = this.refs.inp.value;
        let txtText = this.refs.txt.value;
        if (this.props.onSubmit) {
            this.props.onSubmit({inpText, txtText});
        }
    }
    render() {
        return (
            <div>
                <input ref="inp" style={{
                    display: 'block',
                    width: 
                }}/>
                <textarea ref="txt" style={{
                    display: 'block',
                    width: ,
                    height: ,
                    marginTop: 
                }}></textarea>
                <button onClick={this.handleClick.bind(this)}>釋出</button>
            </div>
        )
    }
}

class CommentList extends Component {
    static defaultProps = {
        listContent: []
    }
    render() {
        return (
            <ul>
                {/*<li>{ this.props.listContent.length }</li>*/}
                {
                    this.props.listContent.map((item, index) => {
                        return (
                            <li key={index} style={{
                                listStyle: 'none'
                            }}>
                                <span >{item.inpText}--</span>
                                <span>{item.txtText}</span>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}

ReactDOM.render(
    <CommentApp/>,
    document.getElementById('root')
)