添加用戶輸入選項作爲MenuItem裏面選擇

Question

我有一個默認選項列表。用戶可以選擇添加所需的類別。我讓它顯示在一個對話框中。我現在如何動態添加它，以便價值道具從數字4開始？以下是我已經做

class Registration extends React.PureComponent { 
    constructor() { 
    super(); 
    this.state = { 
     open: false, 
     type: '', 
     platform: [], 
    }; 

    } 


    handleOpen = (type) => this.setState({ open:true, type }); 
    handleClose =() => this.setState({ open:false }); 

    addPlatform = (event) => this.setState({ platform: event.target.value}); 

    render() { 
    const { type, platform} = this.state; 
    const actions = [ 
     <FlatButton 
     label="Cancel" 
     primary 
     onTouchTap={this.handleClose} 
     />, 
     <FlatButton 
     label="Submit" 
     primary 
     onTouchTap={this.handleClose} 
     />, 
    ]; 
    return (
     <div className="registration"> 
     <Card> 
      <Dialog 
       title={`Add ${type}`} 
       actions={actions} 
       modal={false} 
       open={this.state.open} 
       onRequestClose={this.handleClose} 
       > 
       {type === 'category' ? 
       <TextField 
       type="text" 
       hintText="Category Name" 
       onChange={this.addCategory} 
       /> : 
       <TextField 
       type="text" 
       hintText="Platform Name" 
       onChange={this.addPlatform} 
       /> 
      } 
      </Dialog> 
      <SelectField 
      value={this.state.valueOfCategory} 
      onChange={this.handleCategoryChange} 
      hintText="Category" 
      > 
      <MenuItem value={1} primaryText="Food" /> 
      <MenuItem value={2} primaryText="Travel" /> 
      <MenuItem value={3} primaryText="Communication" /> 
      </SelectField> 
      <FloatingActionButton onTouchTap={() => this.handleOpen('category')}><ContentAdd /></FloatingActionButton> 
      <RaisedButton label="Done" onClick={this.onSubmit} /> 
     </Card> 
     </div> 
    ); 
    } 
} 

export default Registration; 

Answer 1

class Registration extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     open: false, 
     type: '', 
     platform: ["Food", "Travel", "Communication"], 
    }; 

    } 


    handleOpen = (type) => this.setState({ open:true, type }); 
    handleClose =() => this.setState({ open:false }); 

    addPlatform = (event) => this.setState({ platform: [...this.state.platform, event.target.value]}); 

    render() { 
    const { type, platform} = this.state; 
    const actions = [ 
     <FlatButton 
     label="Cancel" 
     primary 
     onTouchTap={this.handleClose} 
     />, 
     <FlatButton 
     label="Submit" 
     primary 
     onTouchTap={this.handleClose} 
     />, 
    ]; 
    return (
     <div className="registration"> 
     <Card> 
      <Dialog 
       title={`Add ${type}`} 
       actions={actions} 
       modal={false} 
       open={this.state.open} 
       onRequestClose={this.handleClose} 
       > 
       {type === 'category' ? 
       <TextField 
       type="text" 
       hintText="Category Name" 
       onChange={this.addCategory} 
       /> : 
       <TextField 
       type="text" 
       hintText="Platform Name" 
       onChange={this.addPlatform} 
       /> 
      } 
      </Dialog> 
      <SelectField 
      value={this.state.valueOfCategory} 
      onChange={this.handleCategoryChange} 
      hintText="Category" 
      > 

      { 
       platform.map((item, index) => <MenuItem value={index+1} primaryText={item} />) 
      } 

      </SelectField> 
      <FloatingActionButton onTouchTap={() => this.handleOpen('category')}><ContentAdd /></FloatingActionButton> 
      <RaisedButton label="Done" onClick={this.onSubmit} /> 
     </Card> 
     </div> 
    ); 
    } 
} 

export default Registration;