我在React中有一个父组件,它显示一个项目列表,也是一个给这个列表项提供活动类的(selectedList)状态,根据活动类显示其他组件 . 这是父组件 .
在一个孩子中,我显示表格,我可以在其中设置一个新列表和一个事件onSubmit,我将其插入一个集合(meteor mongo)
问题是我不能在新项目(id)和父组件之间 Build 关系,因为我想选择新创建的列表(因此给出活动类并显示其他组件) . 然后我想我应该更新state.selectedListId,但我不知道在一个孩子中,我可以将它发送到父组件?
这里有几行代码:
PARENT ELEMENT (PAGE)
class TodosPage extends Component {
constructor(props) {
super(props);
this.state = {
listSelected: "",
};
}
selectList(listId) {
this.setState({ listSelected: listId });
}
renderLists() {
return this.props.lists.map((list) => (
<List
selectedItemId={this.state.listSelected}
selectList={() => this.selectList(list._id)}
key={list._id}
list={list}
countPendingTasks={this.countPendingTasks(list._id)}
/>
));
}
render() {
return (
<div className="container">
<ListForm />
<ListGroup>
{this.renderLists()}
</ListGroup>
CHILD ELEM (ListForm)
handleSubmit(event) {
event.preventDefault();
const name = ReactDOM.findDOMNode(this.refs.nameInput).value.trim();
Meteor.call('lists.insert', name, (err, listId) => {
console.log("in method insert = " + listId);
// HERE I CAN HAVE THE GOOD ID
});
ReactDOM.findDOMNode(this.refs.nameInput).value = '';
}
render() {
return (
<Form bsClass="col-xs-12" onSubmit={this.handleSubmit.bind(this)} >
<FormGroup bsClass="form-group">
<FormControl type="text" ref="nameInput" placeholder="Add New List" />
</FormGroup>
</Form>
);
}
然后,我可以在HandleSubmit中获得良好的ID,但我不知道如何将其返回到父组件 .
感谢帮助
2 回答
事实上,这很简单,
我刚刚使用了我的SelectList函数,就像@Ty Le所说通过prop将它发送给孩子,但要设置新状态, I have to add in my parent constructor :
或者我收到一个错误:this.setState未定义..
谢谢
让父(
TodosPage
)将一个函数作为道具传递给它的子(ListForm
) . 然后onSubmit
,有ListForm
调用该函数 .