如何通过按钮单击事件在 select 下拉列表中添加项目

Question

I have an bootstrap select dropdown control in react js application.I would like to know how to add item (input text control)in dropdown when I click on button.Please check my below code and advise how to do this..

initial state:-

this.state = {
    DivisionState: [],
    DivisionName :''
 };

loading item in dropdown:-

componentDidMount() {

  axios.get(ConfigItem[0].APIPath+'Menus/P')
   .then(res => {
    this.setState({DivisionState:res.data.data});
 }) 

This is an button click event by adding item in dropdown:-

addDivisionHandler = () => {
 // here I would like to know how to add item by button click 
 // for example, I need to add input text value (divisionname in dropdown)
}

html render:-

render() {

let DivisionList = this.state.DivisionState.length > 0
    && this.state.DivisionState.map((item, i) => {
  return (
    <option key={i} value={item.MenuId}>{item.MenuName}</option>
  )
}, this);
return (
<select name ="ParentId" 

{DivisionList}
</select> 

<input type="text" name ="DivisionName" className="form-control form-control-sm" id="TxtDivision" placeholder="Division" value={this.state.DivisionName} required onChange={this.onChangeHandler}/>
<Button type="button"  size="sm" color="success"onClick={addDivisionHandler } ><i className="fa fa-dot-circle-o"></i> Add Division</Button>

Answer 1

Your addDivisionHandler would look something like this:

addDivisionHandler = () => {
  this.setState(prev => ({
    DivisionName: '',  // Resets input back to empty
    DivisionState: [...prev.DivisionState, { MenuId: prev.DivisionName, MenuName: prev.DivisionName }] // Add value of DivisionName to list of DivisionState
  });
}