Javascript 如何在react中重置select下拉列表值

我有一个html下拉选择控件，并将第一个选项值添加为select。有几个其他选项可从下拉列表中选择。现在我想重置下拉列表值并将其设置回Select

我怎样才能在反应中做到这一点

这是我的密码

<select className="form-control" ref="Auditee" name="Auditee" onChange={this.handleChange.bind(this)}>
                <option>Select</option>
                {this.renderAuditee()}
              </select>
<button type="button" className="btn btn-primary" onClick={this.handleClear}>Clear</button>



renderAuditee(){
  let Auditeefiltered = this.state.review1data.map(element=> element.EEECPM).filter((value, index, self) => self.indexOf(value) === index)

  return Auditeefiltered.map(element=>
   <option>{element.toString().replace(/\[.*?\]/,'')}</option>
  )
}


handleClear(e){
 e.preventDefault();

    this.setState({
        filterData:[],
        filter: false
 });

我不知道该如何重置选择下拉列表。任何帮助都会很有帮助

您的选择应该是正确的

您需要为所选值设置一个状态变量

state ={
   selected:''
}

而受控选择应该是

<select className="form-control" value={this.state.selected} name="Auditee" onChange={this.handleChange.bind(this)}>
    <option>Select</option>
    {this.renderAuditee()}
</select>

最后要明确选择,

handleClear = (e) => {
   this.setState({selected:""})
}

您的选择应该是

您需要为所选值设置一个状态变量

state ={
   selected:''
}

而受控选择应该是

<select className="form-control" value={this.state.selected} name="Auditee" onChange={this.handleChange.bind(this)}>
    <option>Select</option>
    {this.renderAuditee()}
</select>

最后要明确选择,

handleClear = (e) => {
   this.setState({selected:""})
}

---

上述答案的功能组件版本为

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  const [data] = useState([1, 2, 3, 4]);
  const [selected, setSelected] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          React <code> SELECT RESET </code> demo.
        </p>
        <select value={selected} onChange={(e) => setSelected(e.target.value)}>
          <option>Select</option>
          {data &&
            data.map((d, index) => {
              return <option key={index}>{d}</option>;
            })}
        </select>
        <br />
        <button onClick={() => setSelected("")}>Clear</button>
      </header>
    </div>
  );
}

export default App;

---

上述答案的功能组件版本为

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  const [data] = useState([1, 2, 3, 4]);
  const [selected, setSelected] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          React <code> SELECT RESET </code> demo.
        </p>
        <select value={selected} onChange={(e) => setSelected(e.target.value)}>
          <option>Select</option>
          {data &&
            data.map((d, index) => {
              return <option key={index}>{d}</option>;
            })}
        </select>
        <br />
        <button onClick={() => setSelected("")}>Clear</button>
      </header>
    </div>
  );
}

export default App;

---

好的，太好了！！很好！！知道了