Question

我有一个使用react-select的表单，在提交表单后，我尝试了多种方法从框中删除选定的值。我希望它在成功提交后显示占位符文本，但无法正常工作。提交后，它仍然显示我在提交之前选择的选项。我在这里向您展示的方法是将react-select值的状态设置为''。我也尝试设置一个空数组，没有用。错误在哪里？

这是在我的容器文件中

import * as downloadedArray from '......the file that have the fixed options'
constructor(props) {
    super(props);
    this.state = ({
      val: '',
    })
  }

handleSubmit = event => {
  event.preventDefault()
......post to server......
  .then(()=> {
      this.setState({val: ''})
  }   

}

<SelectComponent select_id='select_id' select_options={downloadedArray} select_placeholder='Choose an option' handle_change={this.handleChange} val={this.state.val} />

这是我在另一个文件中选择的组件

const SelectComponent = ({select_id, select_options, handle_change, select_placeholder, val}) => (
  <div className='pl1 pl4-l pl2-m pr1 pr4-l pr-2-m pt1 pt4-l pt2-m pb2 pb3-l'>
    <Select id={select_id} name={select_id} options={select_options} onChange={handle_change} placeholder={select_placeholder} value={val} isClearable />
  </div>
)

清除选定的选项，并在提交表单后显示占位符

0 个答案: