Question

//我有列表页面，列出了一些数据的结果。我创建了一个函数，该函数将数据作为参数并通过该数据返回行。按下项目时，我需要触发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时看到“已点击”警报

Answer 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()} />
      ...
  }
}

希望这会有所帮助！

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

1 个答案: