ListView с элементом, открывающим диалоговое окно

Я сделаю все возможное, чтобы объяснить мою ситуацию.

Я собираю массив «событий», затем ListView обрабатываю все эти строки, чтобы показать, как я ожидал.

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

<EventComponent /> — это тот, который отображает все строки.

Требование, которое мне нужно выполнить сейчас, это: Показать больше информации о каждом событии, щелкнув заголовок события (другими словами, нажмите и всплывающее окно)

Первое, что пришло мне в голову, это Modal.

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 /> до сих пор был моим решением, но у меня есть две проблемы (и это доказывает, что я новичок в реакции)

  1. Мне нужно показать модальное окно (<MoreInfo />), когда я нажимаю на событие (<EventComponent />)
  2. Мне нужно получить event_id (уже назначенный в <EventComponent /> с this.props.data.event_id) в модальный <MoreInfo /> и с этим сделать запрос к БД и показать результат.

Что вы думаете? Возможно ли это?

С уважением, мои друзья


person FMGordillo    schedule 26.05.2017    source источник
comment
Это скорее проблема дизайна, но вам нужно сохранить исходные коды нетронутыми, а не компонентами. Таким образом, сопоставляя каждый источник, вы получаете значение, которым можно манипулировать. Бывший. this.state.sources.map(obj =› ‹a onClick={...}›{obj.title}‹/a›);   -  person fungusanthrax    schedule 26.05.2017
comment
Извините, но ваш ответ кажется мне немного запутанным. Мне нужно передать компоненту <MoreInfo /> идентификатор его родительского компонента <EventComponent />, но я не могу его получить   -  person FMGordillo    schedule 26.05.2017


Ответы (1)


Да, то, что вы сделали, совершенно правильно. Я имею в виду, что разумно использовать состояние modalvisible для управления видимостью вашего модального окна (фактически диалогового окна) и передать this.props.data вашему модальному окну.

Так о чем ты беспокоишься? Нет необходимости рассматривать передовой опыт, если нет проблем во время использования. :)

person yifan_z    schedule 27.05.2017
comment
Давайте пока остановимся на этом! Времени мало, чтобы закончить этот проект. Благодарю вас! :D - person FMGordillo; 30.05.2017