Question

我想从 Map.js 获取 ToggleCampus 中的开关值。如何从ToggleCampus.js更新Map.js内部的状态值？

Map.js

export default class Map extends React.Component{
    constructor(props) {
        super(props);
        this.state = { switchVal: true};
    }

    render(){
        return (
             <ToggleCampus switchVal = {this.state.switchVal} />   
        );
    }
}

ToggleCampus.js

export default class ToggleCampus extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        console.log(this.props.switchVal);
        return(
                <Switch
                    value={this.props.switchVal}
                    *(not sure how to use onChange here)*
                />
        );
    }
}

Answer 1

因此，基本上，您要做的就是将函数作为道具传递给ToggleCampus以更新switchVal。就像在ToggleCampus中假设要在单击按钮时更改值一样，因此请检查以下方法：

Map.js

    export default class Map extends React.Component{
        constructor(props) {
            super(props);
            this.state = { switchVal: true};
        }
       changeSwitch = (value) => {
this.setState({switchVal:value});
}

        render(){
            return (
                 <ToggleCampus changeSwitch={this.changeSwitch} switchVal = {this.state.switchVal} />   // passed changeSwitch
            );
        }
    }

和togglecampus.js

export default class ToggleCampus extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        console.log(this.props.switchVal);
        return(
<>
                <Switch
                    value={this.props.switchVal}
                    *(not sure how to use onChange here)*
                />
<Button title="click" onPress={() => this.props.changeSwitch(false)} /> // added this
           </>     
        );
    }
}

希望有帮助。

反应本机|从另一个组件获取开关值

1 个答案: