material-ui-nextコンポーネントを変更するにはどうすればよいですか？

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} の私はconst languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python'];を反復処理していますので、state = {selectedLanguage: 'All'}を使用したいと私はすでにコードrefractoredと作業のこの部分を持っているということです。

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

とにかく、正しく動作するためには、数値として状態値を使用します。私はそれを望んでいない。私は自分の価値を私が反復している言語、つまり「すべて」、「JavaScript」などにしたいと思います。これをどのように屈折させるのですか？

Answer 1

私はちょうどその状態

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

に言語を追加ハンドラ：期待と今私が扱うと使用できるよう onSelect={this.handleSelected}

作品：

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

は、コンポーネントへのハンドラを渡します私のlanguagesの状態です。