2017-07-17 47 views
0

我是新的反应原生。我有一个有许多孩子的有孩子的董事会的班级(关键)。每个键都有一个参数值,当我们将其中的一个键入我的家庭班级时,我希望得到它。获取参数和值的类反应本地

(I'd like use the parameters here) 
GrandParentClass : 
    class GrandParent extends Component { 
     render() { 
     return (
      <View style={styles.container}> 
       <Parent /> 
      </View> 
     ); 
     } 
} 

这是父

class Board extends Component { 

render() { 
    return (
     <View style={styles.pinKeyboard}> 
      <Key label='1'/> 
      <Key label='2'/> 
      <Key label='3'/> 
      <Key label='4'/> 
      <Key label='5'/> 
      <Key label='6'/> 
      <Key label='7'/> 
      <Key label='8'/> 
      <Key label='9'/> 
      <Key label='0' /> 
      <Key label='00' /> 
      <Key label='000' /> 
     </View> 
    ); 
} 
} 

进入关键

export default class Key extends Component { 
     static propTypes = { 
     label: React.PropTypes.string.isRequired 
    }; 

    render() { 
     return (
     <TouchableOpacity style={styles.pinKey} onPress={() => 
      console.log(this.props.label)}> 
      <Text style={{fontSize: 26}}>{this.props.label}</Text> 
     </TouchableOpacity> 
); 
} 
+0

对不起,类父在这里是指董事会。 –

回答

0

从你的描述,我觉得你的问题是如何进去的参数值(而不是替代)的组件当按下一个Key组件时,按下GrandParent

祖父母:

class GrandParent extends Component { 

    state = {label: null}; 

    handleKeyPress = (label) => { 
     //get the current pressed key label here 
     console.log(label) 
     this.setState({label}); 
    }; 

    render() { 
     return (
      <View style={styles.container}> 
       <Board handler={this.handleKeyPress}/> 
      </View> 
     ); 
    } 
} 

局:

class Board extends Component { 

    render() { 
     const {handler} = this.props; 
     return (
      <View style={styles.pinKeyboard}> 
       <Key label='1' handler={handler}/> 
       <Key label='2' handler={handler}/> 
       <Key label='3' handler={handler}/> 
       <Key label='4' handler={handler}/> 
       <Key label='5' handler={handler}/> 
       <Key label='6' handler={handler}/> 
       <Key label='7' handler={handler}/> 
       <Key label='8' handler={handler}/> 
       <Key label='9' handler={handler}/> 
       <Key label='0' handler={handler}/> 
       <Key label='00' handler={handler}/> 
       <Key label='000' handler={handler}/> 
      </View> 
     ); 
    } 
} 

键:

class Key extends Component { 

    static propTypes = { 
     label: React.PropTypes.string.isRequired 
    }; 

    render() { 
     const {handler} = this.props; 
     return (
      <TouchableOpacity style={styles.pinKey} onPress={() => { 
       console.log(this.props.label); 
       //call GrandParent handler when press 
       handler(this.props.label) 
      }}> 
       <Text style={{fontSize: 26}}>{this.props.label}</Text> 
      </TouchableOpacity> 
     ); 
    } 
} 
+0

它完美的作品。非常感谢你 –