通过道具 onPress 传递一个值

Question

我知道我们可以像{this.props.onPress}那样调用函数，我们也可以使用这个回调来传递值吗？默认对象已传递，但我想使用此函数传递一个字符串值。这可能吗，我正在发布我的代码来解决这个问题。

   import Cbuttons from './../utils/CustomButtons' 
    class MainScreen extends Component {                                                 

      _onBtnClick = event => {
        console.log("Click on Button");
      }
       render() {
         return (
          <View style={customStyles.mainContainer}>
            <Cbuttons btnName="MainScreen" onPress={this._onBtnClick}/>
            <Cbuttons btnName="ScreenTwo" onPress={this._onBtnClick}/>
            <Cbuttons btnName="ScreenThree" onPress=
              {this._onBtnClick}/>
          </View>
        );   
    }
  }
   export default MainScreen;

在自定义按钮 clsss 中

class MyButtons extends Component {
   constructor(props){
     super(props);
     this.state={btnName:this.props.btnName};
   }
  render(){
    return(
      <TouchableOpacity  onPress={this.props.onPress} >
        <Text style={yourStyles.buttonText}> {this.props.btnName}</Text>
      </TouchableOpacity>
    );
  }
}

export default MyButtons;

我想通过 this.props.onPress

return btnName 返回

Answer 1

<Cbuttons btnName="MainScreen" onPress={ () => { this._onBtnClick(this.props.btnName)}/>

将该字段转换为一个函数，该函数通常使用参数调用 _onBtnClick 函数。

然后你会在 _onBtnClick() 方法中反映：

_onBtnClick = buttonName => {
        console.log(`Click on Button ${buttonName}`);
}

Answer 2

这解决了我的问题，谢谢@mcpolo

class MyButtons extends Component {
  render(){
    return(
      <TouchableOpacity  onPress={()=>{this.props.onPress(this.props.btnName)}} >
        <Text style={yourStyles.buttonText}> {this.props.btnName}</Text>
      </TouchableOpacity>
    );
  }
}

通过道具 onPress 传递一个值

Passing a value via props onPress

javascript

react-native

react-props