时间戳

首页 > 解决方案 > 如何在呈现页面时将下拉选择更改为其保存的值？

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

问题描述

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

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

员工.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() 方法以在加载页面时加载这些值，但我的猜测是它可能不起作用。

标签： javascriptnode.jsreactjs

解决方案

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


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

推荐阅读