如何在呈现页面时将下拉选择更改为其保存的值？答案

【问题标题】：How do I change a drop down selection to its saved value upon rendering the page?如何在呈现页面时将下拉选择更改为其保存的值？
【发布时间】：2019-12-17 07:03:25
【问题描述】：

我的问题很难解释，但我希望我能把它描述得足够好，让它有意义。本质上，我有一个保存员工数据的表单，并且表单中有一个部分保存员工的辅助电话号码。我旁边有两个下拉列表，指定次要号码出于联系原因可用的时间。完成后，我将表单保存到我们的 sql 数据库中。我不确定这是否可能，但是当我从我们的应用程序中提取这些员工数据时，我希望使用之前的当前值来选择下拉列表。现在我不确定使用 select 是否是最好的方法，或者我是否应该以不同的方式进行操作，任何建议都会有所帮助，谢谢！

请注意，我从数据库接收的这个对象是一个 JSON 对象，如下所示：{"From":"1:00pm", "To":"8:00pm"} .当在我们的应用程序中选择该员工时，我将获取此信息并将其解析为状态变量。

employee.js


export default class Employee extends Component{

if(this.props.employeeKey){
 constructor(props){
  super(props);

  this.state = {
   Name: this.props.name,
   Phone: this.props.phone,
   SecondaryPhone: this.props.secondaryPhone,
   AvailTimes: JSON.parse(this.props.availTimes),
   times: this.props.times,
   TimeFrom: "",
   TimeTo: ""
   }else{

   this.state = {
   Name: "",
   Phone: "",
   SecondaryPhone: "",
   AvailTimes: "",
   times: [],
   TimeFrom: "",
   TimeTo: "",
   }
  }
 }


 onChange(value, e){
  switch(value){
   case "Phone": this.setState(Phone: e.target.value)
    break;
   case "Name": this.setState(Name: e.target.value)
    break;
   case "SecondaryPhone": this.setState(SecondaryPhone: e.target.value)
    break;
   case "FromTime": this.setState(TimeFrom: e.target.value)
    break;
   case "ToTime": this.setState(TimeTo: e.target.value)
    break;
   }



  render(){

   var divToRender = (

    <label>
     From:
    <select onChange={this.onChange.bind(this, 'FromTime')}>{this.state.times.map(time => {return (<option value={time}> {time} </option>)})}</select>
    </label>

    <label>
     To:
    <select onChange={this.onChange.bind(this, 'ToTime')}>{this.state.times.map(time => {return (<option value={time}> {time} </option>)})}</select>
    </label>
   );

   return divToRender
 }
}

我正在考虑在我的状态之前调用 onChange() 方法以在加载页面时加载这些值，但我的猜测是它可能不起作用。

【问题讨论】：

stackoverflow.com/questions/21733847/…
@German 你知道这个问题的答案吗？
@BARNOWL 不久前刚刚开始这项工作，这是我得到的代码。我没有编写课程，我正在使用我得到的 atm。
好的，我明白了。对不起，我知道那是什么感觉。希望你能找到解决办法。
@BARNOWL 我在答案中有一个当前的解决方案，但我认为这不是最好的方法。如果您知道更好的解决方案，请告诉我。

标签： javascript node.js reactjs

【解决方案1】：

找到这个可行的解决方案，但不确定它是否是最佳途径：


<select onChange={this.onChange.bind(this, 'FromTime')}>{this.state.times.map(time => {return (<option value={time} selected={this.state.TimeFrom == time}> {time} </option>)})}</select>

【讨论】：