如何从函数返回组件数组触发函数？答案

【问题标题】：How to trigger a function from function returns an array of component?如何从函数返回组件数组触发函数？
【发布时间】：2019-05-17 17:07:23
【问题描述】：

// 我有列表页，列出一些数据的结果。我创建了一个函数，将数据作为参数并按该数据返回行。我需要在按下项目时触发 onClicked() 函数。

//  I have already tried lots of examples but could not handle it    
// THIS IS MY FUCTION WHICH I WANT TO TRIGGER

onClicked(){
  alert('clicked')
}


//THIS IS MY ALL TABLE CODE 

return(
   <View>
                <OrderListHeaderView/>
                <ScrollView>
                   {ordersRow.rendersRows(this.state.trasmittedOrders)}
                </ScrollView>
   </View>
);

//THIS IS MY FUNCTION RETURNS ROWS

rendersRows(orders) {

        return orders.map((item,index) => {
          return (
            <Swipeable
            key={index}
            rightButtonWidth={100}
            rightButtons={[
               <TouchableOpacity
                  onPress={()=>{
                    //I WANT TO TRIGGER ONCLICK FUNCTION

                }}
              >
                     <Icon name='search'>  
               </TouchableOpacity>,     
                    ]}>
                    <View>
                        <Text>{item.customer.name</Text>
                    </View>
            </Swipeable>
          )
        })

    }

我希望在按下 TouchableOpacity 时看到“点击”警报

【问题讨论】：

<TouchableOpacity onPress={onClicked} > ... 有什么问题？也许我错过了什么，他们在不同的班级吗？
是的，他们在不同的班级@jujunol
您能否更新您的代码以阐明代码的布局方式？

标签： javascript reactjs react-native

【解决方案1】：

假设你的代码看起来像

class C1 extends React.Component {
  funcToRun() {
    // code to run on click
  }

  render() {
    return ( 
      <View>
        <OrderListHeaderView/>
        <ScrollView>
          {ordersRow.rendersRows(this.state.trasmittedOrders)}
        </ScrollView>
      </View>
    )
  }
}

class C2 extends React.Component {
  renderRows(orders) {
    orders.map((order, index) => ( 
      ...
      <TouchableOpacity onPress={/* event here */} />
      ...
    )
  }
}

在 React 中，通常我们希望通过 lifting state up 来解决这个问题（很好的例子 here）

在你的例子中，你必须移动一些东西才能让它工作

class C1 extends React.Component {
  funcToRun() {
    // code to run on click
  }

  renderRows(rows) {
    return rows.map((order, index) => <C2Row onPress={() => this.funcToRun()} />);
  }

  render() {
    return ( 
      <View>
        <OrderListHeaderView/>
        <ScrollView>
          {this.rendersRows(this.state.trasmittedOrders)}
        </ScrollView>
      </View>
    )
  }
}

class C2Row extends React.Component {
  render() {
      ...
      <TouchableOpacity onPress={() => this.props.onPress()} />
      ...
  }
}

希望这会有所帮助！

【讨论】：

你是传奇人物，非常感谢！ @jujunol