Javascript 将用户输入的选项添加为菜单项

我有一个默认选项列表。用户可以选择添加所需的类别。我让它显示在一个对话框中。我现在如何动态添加它，使值从数字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;

类注册扩展了React.PureComponent{
构造函数（）{
超级（）；
此.state={
开：错，
类型：“”，
平台：[]，
};
}
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；
常量动作=[
,
,
];
返回(
{type==='category'？
:
}
this.handleOpen（'category'）}>
);
}
}
出口违约登记；

类注册扩展React.Component{
构造函数（）{
超级（）；
此.state={
开：错，
类型：“”，
平台：[“食品”、“旅游”、“通讯”]，
};
}
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；
常量动作=[
,
,
];
返回(
{type==='category'？
:
}
{
platform.map（（项目，索引）=>）
}
this.handleOpen（'category'）}>
);
}
}
出口违约登记；

感谢您提供的解决方案。您能告诉我在提交值时如何添加内容吗？您想添加到哪里？我不明白，我猜你的代码没有完成。addPlatform是onChange事件，因此如果我键入Twitter，那么选项将是Ttw Twit Twitt Twitt Twitt Twitter我尝试使用而不是操作，因此我可以使用onSubmit并将值作为event.target.value发送，但这样它不起作用。你尝试使用Blur event而不是onChange。

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;