React: вернуть дочерний новый вставленный элемент родительскому для обновления состояния

Question

У меня есть родительский компонент в React, который отображает список элементов, а также состояние (selectedList), которые дают активный класс этому элементу списка + display другие компоненты в зависимости от активного класса. Это родительский компонент.

В детстве я отображение формы, где я могу установить новый список и событие onSubmit, где я вставить его в коллекции (метеор + Монго)

Проблема в том, что я не могу сделать соотношение между новый элемент (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> 

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> 
    ); 
} 

Тогда, я могу иметь хороший ID в HandleSubmit, но я не знаю, как вернуть его родительскому компоненту.

Спасибо за помощь

Answer 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> 
    } 
} 

Answer 2

На самом деле, это было довольно просто,

Я просто использовал свою функцию SelectList и как @Ty Le сказал, послал его к ребенку через опору, но, чтобы установить новое состояние, я должен добавить в мой родительский конструктор:

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

Или я получаю сообщение об ошибке: this.setState неопределен ..

Благодарности