时间戳

首页 > 解决方案 > 如何从反应中的动态选择下拉列表中清除所选值？

javascript - 如何从反应中的动态选择下拉列表中清除所选值？

问题描述

我已经实现了一个表单，其中 Select 下拉菜单从服务器获取动态数据。

现在，当我从下拉列表中选择一个选项时，它会在字段中显示值，但是在保存表单或取消保存后，当我重新打开表单时，所选值不会从字段中清除。

需要做什么来纠正它？这是我的代码：

 class Task extends Component{
   constructor(props){
      super(props);
      this.state={
        SelectedName:'',
        TaskList:[],
       }
    }
  
 componentWillMount(){
 fetch(
 ...
   .then(responseJson => {
       let taskList=responseJson.data;
       let r = taskList.map(function(task){
            return {value: task.id, display: task.name}
          });
       this.setState({TaskList:r });
 }

//this is cancelForm fucntion
  cancelSave=()=>{
     this.setState({SelectedName:''});
   }

handleNameSelection=()=>{
 var row = this.state.TaskList.filter(function (item) {
            return item.value == event.target.value
         })
 this.setState({ SelectedName: row[0].display});
}

 render(){
   return(
    <Select
         defaultValue="placeholder-item"
         id="select-task-name"
         labelText="Select Task Name"
         value={this.state.SelectedName}
         onChange={(event) => this.handleNameSelection(event)}
       >
              {
                (this.state.TaskList.length > 0) ?
                  this.state.TaskList.map(function (list, idx) {
                    return <option key={idx}
                      value={list.value}>{list.display}</option>
                  })
                  :
                  <option />
              }
            </Select>

    );

  }
 }

标签： javascriptreactjsdrop-down-menu

解决方案

提交表单后，您应该清空状态中的任务列表

在这里我看不到您的提交功能（如果您在上面使用它作为子组件，这是另一个实现的逻辑，否则请参见下面的示例）作为示例：

let onSubmit = (values) => {
   /* form submit stuff */

   this.setState({
      ...state,
      SelectedName:''
   });

}

推荐阅读