Question

这是主要组成部分：source

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

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

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

    return (
      <Paper className={classes.root}>
        <Tabs
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          centered
        >
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </Paper>
    );
  }
}

我的问题是代替state = {value: 0} 我想使用state = {selectedLanguage: 'All'}，因为我正在遍历const languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python'];并且我已经将这段代码折射并运行了：

  return (
    <div className={classes.root}>
        <Tabs
          value={props.value}
          onChange={props.handleChange}
          indicatorColor="primary"
          textColor="primary"
          centered
        >
          {languages.map(lang => {
          return (
            <Tab
              key={lang}
              label={lang}
            />
          )
          })}
        </Tabs>
      </div>
  );

无论如何，它仍然使用状态值作为数字才能正常工作。我不想要那个。我希望自己的价值成为我所经历的语言，即：＆＃34;所有＆＃34;，＆＃34; JavaScript＆＃34; ......等。我该如何折射？

Answer 1

我刚刚将语言添加到州

state = {
 value: 0,
 languages: 'All',
};

然后处理程序：

  handleSelected = (lang) => {
    this.setState({ 
      languages: lang,
    });

然后将处理程序传递给组件： onSelect={this.handleSelected}

按预期工作，现在我可以处理和使用languages的状态。

如何修改material-ui-next组件？

1 个答案: