在clic上通过listview项打开模式

我想将信息传递给模态组件，但当我想在列表视图的每个元素上使用模态时，我总是会遇到此错误：

undefined不是对象（计算'\u this2.refs.rowmodel.setModalVisible'）

import React，{Component}来自'React'；
从“react native”导入{View，ListView，Text，StyleSheet，TouchableOpacity}；
从“/行”导入行历史记录；
从“/ModalNormas”导入ModalNormas；
类ListHistorial扩展组件{
建造师（道具）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
modalVisible:错误，
标题：this.props.header，
数据：this.props.data，
数据源：ds.cloneWithRows（this.props.data），
};
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
render（）{
返回(
{this.state.header}
this.refs.rowModal.setModalVisible（true）}>
}
RenderParator={（sectionId，rowId）=>}
/>
);
}
}
导出默认列表历史记录；

---

最近开始关于RN初学者的抱歉问题

我在我的列表视图之外添加了我的模态，并在我的列表视图中调用了相同的模态。希望这能帮助你。下面是我的代码示例：

const React = require('React');
const ReactNative = require('react-native');
const{
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  ListView,
  TouchableOpacity,
  Modal,
} = ReactNative;

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.data),
      modalVisible: false,
      reasonUserName:"",
      reasonUserID:0,
      reasonGroupID:0,
      reason:"",
    }
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={styles.container}>
        <Modal
           animationType={"fade"}
           transparent={true}
           visible={this.state.modalVisible}
           onRequestClose={() => {alert("Modal has been closed.")}}
           >
          <View style={styles.modalContainer}>
           <View style={styles.modalView}>
              <View style={styles.modalHeader}>
                <Text>This is the header</Text>
              </View>
              <View style={styles.modalBody}>
                <TextInput style={styles.modalTextInput} onChangeText={(reason) => this.setState({reason})} placeholder="Enter reason"></TextInput>
              </View>
              <View style={styles.modalFooter}>
                 <TouchableHighlight style={styles.modalButtons} onPress={() => {this.setModalVisible(!this.state.modalVisible)}}>
                   <Text>Close</Text>
                 </TouchableHighlight>
                 <TouchableHighlight style={[styles.modalButtons, styles.modalButtonBorder]} onPress={() => this._pressAcceptReason()}>
                 <Text>Accept</Text>
               </TouchableHighlight>
              </View>
           </View>
          </View>
         </Modal>
        <ListView
             dataSource={this.state.dataSource}
             renderRow={this.renderRow.bind(this)}
             renderSectionHeader={this.renderSectionHeader}
           />
      </View>
    );
  }

  renderRow(user) {
    return (
      <TouchableOpacity style={styles.giveReasonButton} onPress={() => this._pressGiveReason(user)}>
        <Text style={styles.userName}>{user.name}</Text>
      </TouchableOpacity>
      )
  }

  _pressGiveReason(user){
    this.setModalVisible(true);
    this.setState({reasonUserName:user.name,reasonUserID:user.ID, reasonGroupID:user.groupId})
  }

  _pressAcceptReason(){
    this.setModalVisible(false);
  }

module.exports = ModalExample;

const React=require（'React'）；
const ReactNative=require（'react-native'）；
常数{
样式表，
看法
文本，
触控高光，
ListView，
可触摸不透明度，
情态动词
}=反应性；
类ModalExample扩展了React.Component{
建造师（道具）{
超级（道具）；
var dataSource=new ListView.dataSource({
行已更改：（r1，r2）=>r1！==r2
});
此.state={
dataSource:dataSource.cloneWithRows（this.props.data），
modalVisible:错误，
原因用户名：“”，
reasonUserID:0，
reasonGroupID:0，
理由：“，
}
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
render（）{
返回(
{警报（“模式已关闭。”）}
>
这是标题
this.setState（{reason}）占位符=“输入原因”>
{this.setModalVisible（！this.state.modalVisible）}>
接近
此选项。\u按AcceptReason（）}>
接受
);
}
renderRow（用户）{
返回(
此项。\按给定原因（用户）}>
{user.name}
)
}
_按给定原因（用户）{
此.setModalVisible（true）；
this.setState（{reasonUserName:user.name，reasonUserID:user.ID，reasonGroupID:user.groupId}）
}
_按AcceptReason（）{
此.setModalVisible（false）；
}
module.exports=ModalExample；

我在列表视图之外添加了我的模式，并在列表视图中调用了相同的模式。希望这能帮助你。下面是我的代码示例：

const React = require('React');
const ReactNative = require('react-native');
const{
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  ListView,
  TouchableOpacity,
  Modal,
} = ReactNative;

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.data),
      modalVisible: false,
      reasonUserName:"",
      reasonUserID:0,
      reasonGroupID:0,
      reason:"",
    }
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={styles.container}>
        <Modal
           animationType={"fade"}
           transparent={true}
           visible={this.state.modalVisible}
           onRequestClose={() => {alert("Modal has been closed.")}}
           >
          <View style={styles.modalContainer}>
           <View style={styles.modalView}>
              <View style={styles.modalHeader}>
                <Text>This is the header</Text>
              </View>
              <View style={styles.modalBody}>
                <TextInput style={styles.modalTextInput} onChangeText={(reason) => this.setState({reason})} placeholder="Enter reason"></TextInput>
              </View>
              <View style={styles.modalFooter}>
                 <TouchableHighlight style={styles.modalButtons} onPress={() => {this.setModalVisible(!this.state.modalVisible)}}>
                   <Text>Close</Text>
                 </TouchableHighlight>
                 <TouchableHighlight style={[styles.modalButtons, styles.modalButtonBorder]} onPress={() => this._pressAcceptReason()}>
                 <Text>Accept</Text>
               </TouchableHighlight>
              </View>
           </View>
          </View>
         </Modal>
        <ListView
             dataSource={this.state.dataSource}
             renderRow={this.renderRow.bind(this)}
             renderSectionHeader={this.renderSectionHeader}
           />
      </View>
    );
  }

  renderRow(user) {
    return (
      <TouchableOpacity style={styles.giveReasonButton} onPress={() => this._pressGiveReason(user)}>
        <Text style={styles.userName}>{user.name}</Text>
      </TouchableOpacity>
      )
  }

  _pressGiveReason(user){
    this.setModalVisible(true);
    this.setState({reasonUserName:user.name,reasonUserID:user.ID, reasonGroupID:user.groupId})
  }

  _pressAcceptReason(){
    this.setModalVisible(false);
  }

module.exports = ModalExample;

const React=require（'React'）；
const ReactNative=require（'react-native'）；
常数{
样式表，
看法
文本，
触控高光，
ListView，
可触摸不透明度，
情态动词
}=反应性；
类ModalExample扩展了React.Component{
建造师（道具）{
超级（道具）；
var dataSource=new ListView.dataSource({
行已更改：（r1，r2）=>r1！==r2
});
此.state={
dataSource:dataSource.cloneWithRows（this.props.data），
modalVisible:错误，
原因用户名：“”，
reasonUserID:0，
reasonGroupID:0，
理由：“，
}
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
render（）{
返回(
{警报（“模式已关闭。”）}
>
这是标题
this.setState（{reason}）占位符=“输入原因”>
{this.setModalVisible（！this.state.modalVisible）}>
接近
此选项。\u按AcceptReason（）}>
接受
);
}
renderRow（用户）{
返回(
此项。\按给定原因（用户）}>
{user.name}
)
}
_按给定原因（用户）{
此.setModalVisible（true）；
this.setState（{reasonUserName:user.name，reasonUserID:user.ID，reasonGroupID:user.groupId}）
}
_按AcceptReason（）{
此.setModalVisible（false）；
}
module.exports=ModalExample；

如果模式在listview之外。如何获取每个listview项id？@vzhen在renderrow方法中，如果模式在listview之外，则可以更改为如下renderrow（rowData，sectionID，rowID）{showModal（rowData.id）；//或showModal（rowID）；}。如何获取每个listview项id？@vzhen在renderrow方法中，您可以更改为如下renderrow（rowData，sectionID，rowID）{showModal（rowData.id）；//或showModal（rowID）；}