Возможно ли запустить триггер Содержимого компонента из контейнера в реале?

Question

Итак, я получил App, который реализует componentDidMount и render.

Приложение содержит 2 компонента, один, вход AutoComplete, а другой - CardView.

Планов является то, что когда пользователь выбрал элемент из AutoComplete списка, чтобы отобразить его в CardView

Интересно, как бы я вызвать CardView «s оказывают (т.е. устанавливая его состояние) внутри AutoComplete обработчик события.

Смотрите строку:

// готовы вызвать CardView визуализируем прямо здесь.

В приведенном ниже коде.

import React, { Component } from 'react'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import AutoComplete from 'material-ui/AutoComplete'; 


// Needed for onTouchTap 
// http://stackoverflow.com/a/34015469/988941 
injectTapEventPlugin(); 

import './App.css'; 


class App extends Component { 
    constructor() { 
    super(); 
    this.state = {accounts: []} 
    this.showAccount = this.showAccount.bind(this); 
    } 

    componentDidMount() { 
    this.setState({ accounts: [ 
     {account_name: "foo", account_id: 1}, 
     {account_name: "bar", account_id: 2} 
    ]}) 
    } 

    showAccount (value) { 
    // willing to trigger CardView's render right here. 
    } 

    render() { 
    return (  
     <MuiThemeProvider> 
     <div className="App"> 
     <center> 
     <AutoComplete 
      floatingLabelText="account name" 
      filter={AutoComplete.caseInsensitiveFilter} 
      dataSource={this.state.accounts.map((account) => account.account_name)} 
      onUpdateInput={this.showAccount} 
     /></center> 
     <CardView /> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default App; 

Answer 1

Вот мой ответ, основанный на том, как я понимаю ваш вопрос.

class CardView extends Component { 
    constructor() { 
    super() 
    } 

    render() { 
    if (this.props.account) { 
     return (
     <p>{this.props.account.account_name}</p> 
    ) 
    } 
    else { 
     return (
     <p>no data</p> 
    ) 
    } 

    } 
} 
    class App extends Component { 
    constructor() { 
    super(); 
    this.state = {accounts: [], infoToDisplay: ''} 
    this.showAccount = this.showAccount.bind(this); 
    } 

    componentDidMount() { 
    this.setState({ accounts: [ 
     {account_name: "foo", account_id: 1}, 
     {account_name: "bar", account_id: 2} 
    ]}) 
    } 

    showAccount (value) { 
    let infoToDisplay = this.state.infoToDisplay; 
    infoToDisplay = value; 
    this.setState({infoToDisplay}); 
    // this line will cause a rerender after the user has chosen something 
    // from the autoComplete list 
    } 

    render() { 
    return (  
     <MuiThemeProvider> 
     <div className="App"> 
     <center> 
     <AutoComplete 
      floatingLabelText="account name" 
      filter={AutoComplete.caseInsensitiveFilter} 
      dataSource={this.state.accounts.map((account) => account.account_name)} 
      onUpdateInput={this.showAccount} 
     /></center> 
     <CardView accounts={this.state.infoToDisplay} /> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default App; 

Что я сделал, дает состояние компонента приложения отслеживать выбор пользователя. Затем я передаю это состояние в качестве опоры для компонента карты. Когда состояние будет полным, карта покажет его, поэтому в функции showAccount я вызываю setState на infoToDisplay, который вызывает другой рендеринг, теперь реквизит карты будет заполнен последней информацией и отображать ее.

Надеюсь, это ясно.