首页 文章

React:将子插入的子元素返回父级以更新状态

提问于
浏览
0

我在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 回答

  • 1

    事实上,这很简单,

    我刚刚使用了我的SelectList函数,就像@Ty Le所说通过prop将它发送给孩子,但要设置新状态, I have to add in my parent constructor

    this.selectList = this.selectList.bind(this);
    

    或者我收到一个错误:this.setState未定义..

    谢谢

  • 0

    让父( TodosPage )将一个函数作为道具传递给它的子( ListForm ) . 然后 onSubmit ,有 ListForm 调用该函数 .

    class TodosPage extends React.Component {
      handleListFormSubmit = (goodId) => {
        // do something with goodId
      }
      render() {
        return <ListForm onSubmit={this.handleListFormSubmit} />;
      }
    }
    
    class ListForm extends React.Component {
      handleSubmit = (event) => {
        // get GOOD ID from the form, then call the parent function
        // [...]
        this.props.onSubmit(goodId);
      }
      render() {
        <Form onSubmit={this.handleSubmit}>
          {/* form stuff here */}
        </Form>
      }
    }
    

相关问题