Question

我是反应原生的新人。我有一个班级的家，有一个名叫董事会的孩子，有很多孩子（Key）。每个Key都有一个参数值，当我们将其中一个按入我的家庭课程时，我希望得到这个。

 (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>
);
}

Answer 1

根据您的说明，我猜您的问题是如何在按下一个GrandParent组件时从Key获取内部（而非代替）组件的参数值。

祖父母：

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>
        );
    }
}

获取参数和值的反应类本地

1 个答案: