在React中提交表单后，如何强制“选择”返回“选择...”？

问题描述

提交表格后，如何强制“选择”返回“选择...”？

<select name="activated" className="form-control" as="select" onChange={handleInputChange}>  
         <option value={values.activated} selected>Choose...</option>           
         <option value="Activated">Activated</option>
         <option value="Deactivated">Deactivated</option>     
</select>  

我认为我必须使用模糊或聚焦方法。有想法吗？

解决方法

import Select from 'react-select';

export class Test extends Component {
  this.setState = {
    selection: 0,};

  onSelectChange = (e) => {
    this.setState({ selection: e.value });
  }

  onSubmit = (e) => {
    e.preventDefault();
    const { selection } = this.state;
    // Post request logic comes here
    // Reset Select component to original default state
    this.setState({selection: 0});
  }

  render() {

    const options = [
      { label: 'Choose something',value: 0 },{ label: 'Item 1',value: 1 },{ label: 'Item 2',value: 2 },];

    return (
      <form onSubmit={this.onSubmit}>
        <Select
          options={options}
          value={this.state.selection}
          onChange={this.onSelectChange}
        />
       //submit button here          
      </form>
    );

使用值prop代替defaultValue并通过状态进行管理。在提交时，将该状态重置为初始值，即0。

,

非常感谢，但是我找到了一个简单的解决方案。在我的handleSubmit函数上添加以下内容：document.getElementById（“ myId”）。selectedIndex = 0