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

Question

我的问题很难解释，但我希望我能描述得足够好，让它有意义。基本上，我有一个保存员工数据的表单，表单中有一个部分保存员工的第二个电话号码。我有两个下拉列表旁边的这一点，指定时间，第二个号码是可用的联系原因。完成后，我将表单保存到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（）方法，以便在加载页面时加载这些值，但我猜它可能不起作用。

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