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

Question

我在 react js 应用程序中有一个引导选择下拉控件。我想知道当我单击按钮时如何在下拉列表中添加项目（输入文本控件）。请检查我下面的代码并建议如何执行此操作..

初始状态：-

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>

标签： reactjs

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