處理使用者輸入

• 首先先寫出html結構以及樣式

class CommentInput extends React.Component{
    render(){
        return (
            <div className='comment-input'>
            <div className='comment-field'>
              <span className='comment-field-name'>使用者名稱：</span>
              <
 
div className='comment-field-input'>
                <input/>
              </div>
            </div>
            <div className='comment-field'>
              <span className='comment-field-name'>評論內容：</span>
              <div className='comment-field-input'>
 

                <textarea />
              </div>
            </div>
            <div className='comment-field-button'>
              <button >
                釋出
              </button>
            </div>
          </div>
        )
    }
}

• 在元件的建構函式中初始化一個state儲存狀態

 constructor(){
        super()
        this.state={
            username:'',
            content:''
        }
    }
   

• 設定value屬性，使value值等於this.state裡面相對應的值

...
    handleUsernameChange(e){
        this.setState({
            username:e.target.value
        })
    }
    handleTextareaChange(e){
        this.setState({ content:e.target.value})
    }
...
...
<div className='comment-field'>
          <span className='comment-field-name'>使用者名稱：</span>
          <div className='comment-field-input'>
            <input value={this.state.username} />
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>評論內容：</span>
          <div className='comment-field-input'>
            <textarea value={this.state.content} />
          </div>
        </div>
...

類似於<input/> 、<select />、<textarea />這些元素的value值被React所控制、渲染的元件，在React中成為受控元件。

向父元素傳遞資料 ！

重點哦～
當用戶在CommentInput裡面輸入完內容後，點擊發布，內容需要顯示到CommentList元件當中。但這兩個元件是單獨的，分離的元件。父元件CommentApp充當兩個子元件的橋樑。

當用戶點擊發布按鈕的時候，將CommentInput的state當中最新的評論資料傳遞給父元件CommentApp,然後讓父元件把這個資料傳遞給CommentList進行渲染

...
  <button onClick={this.handleSubmit.bind(this)}>
                釋出
   </button>
...

 handleSubmit(){
        if(this.props.onSubmit){
             const {username,content}=this.state;
             this.props.onSubmit({username,content})
        }
        this.setState({content:''})
    }
 

handleSubmit方法會判斷props是否傳入了onSubmit屬性，有就呼叫該函式，並且把使用者輸入的使用者名稱和評論資料傳入該函式。然後再通過setState清空使用者輸入的評論內容（但為了使用者體驗，保留使用者名稱）

修改CommentApp.js

class CommentApp extends Component {
  handleSubmitComment (comment) {
    console.log(comment)
  }

  render() {
    return (
      <div className='wrapper'>
        <CommentInput
          onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList />
      </div>
    )
  }
}

在 CommentApp中給 CommentInput 傳入一個 onSubmit屬性，這個屬性值是 CommentApp 自己的一個方法 handleSubmitComment。這樣 CommentInput 就可以呼叫 this.props.onSubmit(…) 把資料傳給 CommenApp。

現在在 CommentInput 中輸入完評論內容以後點擊發布，就可以看到CommentApp在控制檯列印的資料