React：将新插入的子元素返回给父元素以更新状态答案

【问题标题】：React: Give back the child new inserted element to parent for update the stateReact：将新插入的子元素返回给父元素以更新状态
【发布时间】：2016-10-20 09:53:15
【问题描述】：

我在 React 中有一个父组件，它显示一个项目列表，也是一个 (selectedList) 的状态，它为这个列表项提供一个活动类 + 根据活动类显示其他组件。这是父组件。

在一个孩子中，我显示了一个表单，我可以在其中设置一个新列表和一个 onSubmit 事件，我将它插入到一个集合中（meteor+mongo）

问题是我无法在新项目（id）和父组件之间建立关系，因为我想选择新创建的列表（所以给活动类并显示其他组件）。然后我认为我应该更新 state.selectedListId 但我不知道如何在孩子中将其发送到父组件？

这里有几行代码：

父元素（页面）

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>

儿童元素（列表形式）

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，但我不知道如何将它还给父组件..

感谢您的帮助

【问题讨论】：

标签： javascript reactjs meteor state

【解决方案1】：

让父级 (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>
  }
}

【讨论】：

嘿，谢谢你的回答，但我无法在父级中设置状态，我也可以这样做，但我有错误：传递调用'lists.insert'的结果时出现异常：TypeError : this.selectList 不是函数.. 如果我在父句柄ListFormSubmit = (goodId) => { this.setState(listSelected: goodId); } .. 你有什么想法吗？

【解决方案2】：

其实很简单，

我刚刚使用了我的 SelectList 函数，就像@Ty Le 所说的通过 prop 将它发送给孩子，但是要设置新状态，我必须在我的父构造函数中添加：

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

或者我得到一个错误：this.setState is undefined ..

谢谢

【讨论】：

正确，如果您使用selectList(listId) {} 中的常规函数，则需要bind(this)。如果你使用箭头函数 (selectList = (listId) => {}) 我认为你不需要绑定 this。