Как изменить вкладку с родительской в ​​вкладках React Material

У меня есть такой компонент, как FeedSwitcher, с двумя вкладками внутри

один для общей ленты другой только для сообщений текущего пользователя

в компоненте FeedSwitcher в начале значение равно 0, поэтому текущий пользователь может просматривать всю ленту.

const FeedSwitcher = ({feed, posts, user }: FeedSwitcherProps) => {
  const classes = useStyles();
  const [value, setValue] = useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  return (
    <div className={classes.root}>
      <Tabs
        value={value}
        onChange={handleChange}
        variant="fullWidth"
        indicatorColor="primary"
        textColor="primary"
        aria-label="switcher tabs"
      >
        <Tab icon={<PeopleIcon />} aria-label="phone" />
        <Tab icon={<PersonIcon />} aria-label="favorite" />
      </Tabs>
      <TabPanel value={value} index={0}>
        <Feed feed={feed} />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Posts posts={posts} user={user} />
      </TabPanel>
    </div>
  );
};

После того, как текущий пользователь разместит новую ветку

(форма находится в родительском компоненте)

Я хочу показать вкладку с индексом 1

Как можно установить значение от родителя?

Должен ли я использовать состояние редукции или есть другой прямой и более простой способ?


reactjs react-material
person user3887366    schedule 12.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Состояние должно быть в родительском компоненте.

Вы можете передать дочернему компоненту значение и передать ему аргумент функции, например onValueChange, который он может использовать для запуска обновления родительского состояния.

// in parent
const [feedSwitcherValue, setFeedSwitcherValue] = useState(0);
return (
  <FeedSwitcher
    feed={feed}
    posts={posts}
    user={user}
    value={feedSwitcherValue}
    onValueChange={value => setFeedSwitcherValue(value)}
  />
); 

// child
const FeedSwitcher = ({feed, posts, user, value, onValueChange }: FeedSwitcherProps) => {
  const classes = useStyles();

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    onValueChange(newValue);
  };
  return (
    <div className={classes.root}>
      <Tabs
        value={value}
        onChange={handleChange}
        variant="fullWidth"
        indicatorColor="primary"
        textColor="primary"
        aria-label="switcher tabs"
      >
        <Tab icon={<PeopleIcon />} aria-label="phone" />
        <Tab icon={<PersonIcon />} aria-label="favorite" />
      </Tabs>
      <TabPanel value={value} index={0}>
        <Feed feed={feed} />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Posts posts={posts} user={user} />
      </TabPanel>
    </div>
  );
};
person reobin    schedule 12.09.2020
comment
Моя первая попытка :) но не получается спасибо за ответ - person user3887366; 12.09.2020
comment
Начните с этого и сообщите нам, что не работает :) - person reobin; 12.09.2020