从子组件传递数据给父组件
commentForm组件
'use strict'
import React from 'react'
class CommentForm extends React.Component{
handleSubmit(event) { //作用于表单
event.preventDefault();
console.log('提交表单');
let author = this.refs.author.value, //获取用户提交数据
text = this.refs.text.value; //获取用户提交数据
console.log(author, text);
this.props.onCommentSubmit({author, text, date: '刚刚'})
}
render() {
return (
<form className="ui reply form" onSubmit={this.handleSubmit.bind(this)}>
<div className="field">
<input type="text" placeholder="姓名" ref="author"/>
</div>
<div className="field">
<textarea placeholder="评论" ref="text"></textarea>
</div>
<button type="submit" className="ui blue button">添加评论</button>
</form>
)
}
}
export { CommentForm as default }; //输出CommentBox组件作为默认的东西
commentBox组件
'use strict'
import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import $ from 'jquery'
class CommentBox extends React.Component{
constructor(props) {
super(props);
//设置组件初始化状态
this.state = { data: [] };
this.getComments();
setInterval(() => this.getComments(), 5000);
} //构造函数
handleCommentSubmit(comment) {
console.log(comment); //用户提交的内容
let comments = this.state.data, //获取原来提交的内容
newComments = comments.concat(comment); //新的提交内容
this.setState({data: newComments});
}
getComments() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: comments => {
this.setState({data: comments})
},
error: (xhr, status, error) => {
console.log(error)
}
})
}
render() {
return(
<div className = "ui comments">
<h1>评论</h1>
<div className="ui divider"></div>
<CommentList data = {this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>
</div>
);
}
}
export { CommentBox as default }; //输出CommentBox组件作为默认的东西
为什么在函数后面加.bind(this)?
handleCommentSubmit(comment) {
console.log(comment); //用户提交的内容
let comments = this.state.data, //获取原来提交的内容
newComments = comments.concat(comment); //新的提交内容
this.setState({data: newComments});
}
函数中有使用到this