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

Question

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

<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>  

我想我必须使用模糊或聚焦方法。有什么想法？

标签： javascripthtmlformsreact-bootstrap-form

Answer 1

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

使用 value prop 代替 defaultValue 并通过 state 管理它。在提交时，将该 state 重置为初始值，即 0。