reactjs React改变状态

k2fxgqgv 于 2023-06-05 发布在 React

关注(0)|答案(2)|浏览(153)

我有一个组件，它的选项卡有一个状态。默认情况下，它应该打开第一个选项卡，即状态值= 0。但是，当我在另一个组件中导入该组件时，它应该打开分配的状态，例如state value = 1。请检查下面的例子。我怎么才能做到呢？
先谢谢你了

/**Component One***/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
});

class SimpleTabs extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
      </div>
    );
  }
}

SimpleTabs.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleTabs);

/**Component Two**/

import React from 'react';
import SimpleTabs from './SimpleTabs'

class ComponentTwo extends Component {
render () {

return (
   <SimpleTabs value={1}/>
)
}
}

export default ComponentTwo

reactjs

来源：https://stackoverflow.com/questions/54979856/react-changing-the-state

2条答案

按热度按时间

k4aesqcs1#

您正在传递props，因此应该检查props值，然后在组件内部使用state值。所以render函数应该是

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  }
});

class SimpleTabs extends React.Component {
  state = {
    Tabvalue: 1
  };

  componentDidMount() {
    if (this.props.open) {
      this.setState({ Tabvalue: this.props.open });
    }
  }

  handleChange = (event, value) => {
    this.setState({ Tabvalue: value });
  };

  render() {
    const { classes } = this.props;
    const { Tabvalue } = this.state;

    let value = Tabvalue;

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
      </div>
    );
  }
}

SimpleTabs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleTabs);

/**Component Two**/

import React from 'react';
import SimpleTabs from './SimpleTabs'

class ComponentTwo extends React.Component {
  render() {
    return <SimpleTabs open={2} />;
  }
}

export default ComponentTwo

在这里，将打开值作为props传递，如果by props值不存在，则将打开默认的1选项卡。不要使用0作为状态，因为类型检查会将其作为false值。

赞(0）回复(0）举报 2023-06-05

gwo2fgha2#

可以在props中传递tab值

state = {
    value: props.tabValue,
  };

 <SimpleTabs value={tabvalue}/>

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs React改变状态

2条答案

相关问题

热门标签

最新问答