反应原生参考不工作在动态添加行

Question

我正在创建电子表格反应本机和我想附加列，如果我们点击添加按钮，但是当我在动态列中使用ref它会给出错误。这里是我的代码..请告诉我如何使用ref，所以它不会给我错误。以下是当我使用参考，我收到的错误..

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    View, 
    TouchableOpacity, 
    Text, 
    TextInput, 
    ScrollView 
} from 'react-native'; 
import Icon from 'react-native-vector-icons/FontAwesome'; 
var unique=1; 
export default class Sheet extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     currentRowNo:1, 
     serialNo:1, 
     rows:this.props.species.length, 
     breaker:true, 
     appendRows:[], 
     index:1 
     } 
    } 
    rendercol(rowNo) 
    { 
     const col=[]; 
     var serialNo=this.state.index; 
     col.push(<View key="rowNum" style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>{rowNo}</Text></View></View>); 
     for (var j=serialNo;j<=this.state.rows+serialNo-1;j++) 
      { 
       col.push(<TouchableOpacity style={styles.fixCellWidth} key={"key_"+j}><Text style={{fontSize:16}} onPress={this.changeValue.bind(this,j)} ref={"red"+j}>{console.log(this.props.action.bind(this,j))}</Text></TouchableOpacity>);            
      } 
    return <View key={"Row"+rowNo}>{col}</View>; 
    } 
    changeValue(val) 
    { 
    this.props.changeVal(val); 
    } 
    addRow(){ 
    this.state.appendRows.push(
     this.rendercol(this.state.index) 
    ) 
    this.setState({ 
     index: this.state.index + 1, 
     appendRows: this.state.appendRows 
    }) 
    } 
    render() 
    { 
    var _scrollView: ScrollView; 
    const row=[]; 
    const sheet=[]; 
     sheet.push(<View key="headRow" style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>S./#</Text></View></View>); 
     this.props.species.map((option) => { 
     sheet.push(<View key={option.code} style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>{option.code}</Text></View></View>); 
     }); 
     sheet.push(<TouchableOpacity key="rowAdd" style={styles.column} onPress={this.addRow.bind(this)}><View style={[styles.fixCellWidth,{backgroundColor:"green"}]}><Icon name="plus" style={[styles.icon,styles.fontWhite]}/></View></TouchableOpacity>); 
    return ( 
     <ScrollView 
      ref={(scrollView) => { _scrollView = scrollView; }} 
      automaticallyAdjustContentInsets={false} 
      horizontal={false} 
      style={{height:650,paddingBottom:10}}> 
     <View style={styles.column}> 
     <View>{sheet}</View> 
     <ScrollView 
      ref={(scrollView) => { _scrollView = scrollView; }} 
      automaticallyAdjustContentInsets={false} 
      horizontal={true} 
      style={[styles.scrollFull]}> 
      {this.state.appendRows} 
     </ScrollView> 
     </View> 
     </ScrollView> 
    ); 
    } 
} 

Answer 1

您正在重复裁判分配在渲染功能：

return ( 
     <ScrollView 
      ref={(scrollView) => { _scrollView = scrollView; }} // <- here 
      automaticallyAdjustContentInsets={false} 
      horizontal={false} 
      style={{height:650,paddingBottom:10}}> 
     <View style={styles.column}> 
     <View>{sheet}</View> 
     <ScrollView 
      ref={(scrollView) => { _scrollView = scrollView; }} // <- here 
      automaticallyAdjustContentInsets={false} 
      horizontal={true} 
      style={[styles.scrollFull]}> 
      {this.state.appendRows} 
     </ScrollView> 
     </View> 
     </ScrollView> 
    ); 

但是，这是没有问题的。问题是你正在创建refsrender组件外部的方法，具体在你的rendercol函数中。这里是错误的解释：https://gist.github.com/jimfb/4faa6cbfb1ef476bd105。

您可以添加使用状态行，看看这个方法：很多Append TextInput component one after another when press button in React Native