如何通過按鈕單擊事件在 select 下拉列表中添加項目

Question

我在 react js 應用程序中有一個引導 select 下拉控件。我想知道當我單擊按鈕時如何在下拉列表中添加項目（輸入文本控件）。請檢查我下面的代碼並建議如何執行此操作..

初始 state：-

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

在下拉列表中加載項目：-

componentDidMount() {

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

這是通過在下拉列表中添加項目的按鈕單擊事件：-

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() {

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

您的 addDivisionHandler 看起來像這樣：

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