我正在使用基于React类的组件和材质UI来显示下拉菜单。我最初设置了默认值，选择下拉菜单的值会根据用户的点击而更改。但是，我希望以编程方式更改值，例如-我希望更改变量中的值，例如-年龄=40，以及先前具有年龄=30选项的下拉菜单，现在会自动反映值40。有人能给点建议吗？我尝试在选项中传递value={this.age}，并在代码的某个地方通过编程将this.age的值更改为40，但是下拉列表仍然显示值30
ecbunoof1#
如果您想使用<select>，直接的答案是：
<select>
class App extends Component { constructor() { super(); this.state = { age: "10" }; } render() { return ( <div className="App"> <button onClick={() => this.setState({ age: "40" })}> Set age to 40 </button> <p>A dropdown:</p> <select value={this.state.value} onClick={(e) => this.setState({ age: e.target.value })} > <option value="10" selected={this.state.age === "10"}>10</option> <option value="20" selected={this.state.age === "20"}>20</option> <option value="30" selected={this.state.age === "30"}>30</option> <option value="40" selected={this.state.age === "40"}>40</option> </select> </div> ); } }
如果单击该按钮，选择将发生变化。
1条答案
按热度按时间ecbunoof1#
如果您想使用
<select>，直接的答案是：如果单击该按钮，选择将发生变化。