React.js 小书 Lesson15 - 实战分析:评论功能(二)
React.js 小书 Lesson15 - 实战分析:评论功能(二)
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 上一节我们构建了基本的代码框架,现在开始完善其他的内容。 处理用户输入我们从 import React,{ Component } from 'react' class CommentInput extends 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> ) } } export default CommentInput 在浏览器中可以看到
因为还没有加入处理逻辑,所以你输入内容,然后点击发布是不会有什么效果的。用户可输入内容一个是用户名(username),一个是评论内容(content),我们在组件的构造函数中初始化一个 ... class CommentInput extends Component { constructor () { super() this.state = { username: '',content: '' } } ... } ... 然后给输入框设置 ... <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> ... 可以看到接受用户名输入的 这是为什么呢?React.js 认为所有的状态都应该由 React.js 的 state 控制,只要类似于 例如,上面设置了 所以应该怎么做才能把用户内容输入更新到输入框当中呢?在 React.js 当中必须要用 ... <div className='comment-field-input'> <input value={this.state.username} onChange={this.handleUsernameChange.bind(this)} /> </div> ... 上面的代码给 ... handleUsernameChange (event) { this.setState({ username: event.target.value }) } ... 在这个方法中,我们通过
类似于 同样地,让 ... handleContentChange (event) { this.setState({ content: event.target.value }) } ... <div className='comment-field'> <span className='comment-field-name'>评论内容:</span> <div className='comment-field-input'> <textarea value={this.state.content} onChange={this.handleContentChange.bind(this)} /> </div> </div> ... 向父组件传递数据当用户在
可以看到,
先给发布按钮添加事件: ... <div className='comment-field-button'> <button onClick={this.handleSubmit.bind(this)}> 发布 </button> </div> ... 用户点击按钮的时候会调用 ... handleSubmit () { if (this.props.onSubmit) { const { username,content } = this.state this.props.onSubmit({username,content}) } this.setState({ content: '' }) } ...
修改 class CommentApp extends Component { handleSubmitComment (comment) { console.log(comment) } render() { return ( <div className='wrapper'> <CommentInput onSubmit={this.handleSubmitComment.bind(this)} /> <CommentList /> </div> ) } } 在 现在在
这样就顺利地把数据传递给了父组件,接下来我们开始处理评论列表相关的逻辑。 下一节中我们将介绍《React.js 小书 Lesson16 - 实战分析:评论功能(三)》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |