React第一阶段实战分析--评论功能（二）

处理用户输入

首先先写出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在控制台打印的数据