帶有打開對話框的元素的ListView

我收集一個「事件」數組，然後ListView處理所有這些行，以顯示我的預期。

<ListView 
    dataSource={this.state.dataSource} 
    enableEmptySections={true} // For warning... 
    renderRow={(rowData) => <EventComponent data={rowData} />} 
/>

<EventComponent />是使所有行的一個。

，我現在需要做的要求是： 顯示更多信息有關的每一個事件，單擊事件的標題（換句話說，點擊彈出）

首先，它來到我的腦海這是莫代爾

class EventComponent extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     modalVisible: false, 
    } 
} 

render() { 
    return (
     <View style={styles.userDefined.event}> 

      <MoreInfo data={this.props.data} show={this.state.modalVisible}/> <------ my solution 

      <View style={{flex:0.02, backgroundColor: this.props.data.color}} /> 
      <View style={{flex: 0.98, marginLeft: 5}}> 
       <Text onLongPress={() => !this.state.modalVisible} style={[styles.userDefined.eventName, {color: this.props.data.color}]}>{this.props.data.name}</Text> 
       <Text style={styles.userDefined.eventBy}>{this.props.data.owner}</Text> 
       <Text style={styles.userDefined.eventContent}>{this.props.data.startTime} - {this.props.data.endTime}</Text> 
       <Text style={styles.userDefined.eventContent}>Espacio: {this.props.data.space}</Text> 
      </View> 
     </View> 
    ) 
} 
}

的<MoreInfo />成分是我的解決方案，到目前爲止，但我有兩個問題（這是它如何證明我是有反應的新手）

我需要顯示模態（<MoreInfo />）當我按下事件（<EventComponent />）
我需要檢索的event_id（已分配在<EventComponent />與this.props.data.event_id）入模態<MoreInfo />有了這樣的，做一個查詢數據庫並顯示結果。

您怎麼看？有可能嗎？

最好的問候我的朋友

來源

2017-05-26 Facundo Martin Gordillo

這更像是一個設計問題，但你想要做的是保持源代碼完整，而不是在組件中。這樣，通過映射每個來源，您就有了操控的價值。例如， this.state.sources.map（obj =>{obj.title}）; – fungusanthrax

對不起，但我的答案似乎有點令人困惑。我需要的是將組件''從其父組件''傳遞給組件，但我無法檢索它 –

是的，你做的是完全正確的。我的意思是使用狀態modalvisible控制模態的可見性（實際上是對話框）並將this.props.data傳遞給模態是合理的。

那麼你擔心什麼？如果在使用過程中沒有問題，則無需考慮最佳實踐。 :)

來源

2017-05-27 01:14:55

讓我們繼續堅持！結束這個項目的時間很短。謝謝！：d –

帶有打開對話框的元素的ListView

回答

相關問題