如何渲染基于ReactJS中另一个值的选择框？

Question

class Rent extends React.Component{ 

    changeModel(){ 
     var ele = document.getElementById('car_type').value; 
     var val = document.getElementById('car_model'); 
     var hatch = "<option value = 'Indica'>Indica</option><option value='Swift'>Swift</option><option value = 'Logan'>Logan</option>"; 
     var sedan = "<option value = 'Indigo'>Indigo</option><option value='Xuv'>Xuv</option><option value = 'Accent'>Accent</option>"; 
     var van = "<option value = 'Omni'>Omni</option><option value='Vagon-R'>Vagon-R</option><option value = 'Bolero'>Bolero</option>"; 
     switch(ele){ 
     case 'hatchback': 
       React.render(hatch,val); 
       break; 
     case 'sedan': 
       React.render(sedan,val); 
       break; 
     case 'van': 
       React.render(van,val); 
       break; 
     } 

    } 

    render(){ 
     return(
      <div id = "content"> 
        <div id="content-header"> 

        <div className="container-fluid"> 
         <div className="widget-box"> 

         <div className="widget-content nopadding"> 
          <form action="#" method="get" className="form-horizontal"> 
            <div className="control-group"> 
             <label className="control-label">Car Type</label> 
             <div className="controls" > 
              <select id ="car_type" onChange = {this.changeModel}> 
              <option value ="hatchback">Hatch Back</option> 
              <option value ="van">Van</option> 
              <option value ="sedan">Sedan</option> 
              </select> 
             </div> 
            </div> 

             <div className="control-group"> 
             <label className="control-label">Car Model</label> 
             <div className="controls "> 
              <select id ="car_model" placeholder = "Select Car model">     
              </select> 
             </div> 
             </div> 
           </form> 
          </div> 
         </div> 
            </form> 
           </div> 
          </div> 
      </div> 
      </div> 

     ) 
    } 
} 

这是我的代码基础上car_type我不能使我car_model选择框中选择box.I已经使用reactJS渲染功能来修改虚拟DOM，也尝试使用.innerHTML功能来修改实际的DOM，但没有一次成功出。

Answer 1

试试这个：

class Rent extends React.Component{ 

    constructor(props){ 
    super(props); 
    this.state={ 
     catType: 'hatchback', 
    } 
} 

changeModel(){ 
    var ele = document.getElementById('car_type').value; 
    this.setState({catType: ele});  
} 

_populateModels(){ 

    var hatch = [ <option value = 'Indica'>Indica</option>, 
       <option value='Swift'>Swift</option>, 
       <option value = 'Logan'>Logan</option>]; 
    var sedan = [ <option value = 'Indigo'>Indigo</option>, 
       <option value='Xuv'>Xuv</option>, 
       <option value = 'Accent'>Accent</option>]; 
    var van = [ <option value = 'Omni'>Omni</option>, 
       <option value='Vagon-R'>Vagon-R</option>, 
       <option value = 'Bolero'>Bolero</option>]; 

    switch(this.state.catType){ 
    case 'hatchback': 
      return hatch; 
    case 'sedan': 
      return sedan; 
    case 'van': 
      return van; 
    } 
} 

render(){ 
    return(
     <div id = "content"> 
      <div id="content-header"> 
       <div className="container-fluid"> 
       <div className="widget-box"> 

        <div className="widget-content nopadding"> 
         <form action="#" method="get" className="form-horizontal"> 
           <div className="control-group"> 
            <label className="control-label">Car Type</label> 
            <div className="controls" > 
             <select id ="car_type" onChange = {this.changeModel.bind(this)}> 
             <option value ="hatchback">Hatch Back</option> 
             <option value ="van">Van</option> 
             <option value ="sedan">Sedan</option> 
             </select> 
            </div> 
           </div> 

            <div className="control-group"> 
            <label className="control-label">Car Model</label> 
            <div className="controls "> 
             <select id ="car_model" placeholder = "Select Car model"> 
             {this._populateModels()}     
             </select> 
            </div> 
            </div> 
         </form> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div> 
    ) 
    } 
} 

Jsfiddle：https://jsfiddle.net/pyfnh7c0/

Answer 2

您需要将this绑定到onChange。

<select id ="car_type" onChange = {this.changeModel.bind(this)}> 

这样做的原因是函数的作用域在从不同的上下文中调用时会发生变化，除非您明确地将函数绑定到某个特定的值。

如果您在此之后遇到任何困难，请告诉我。

Answer 3

你不应该在react.render函数返回一个字符串。 所以它应该是这样的，否则：

const Hatch =() => ( <select> <option value = 'Indica'>Indica</option><option value='Swift'>Swift</option><option value = 'Logan'>Logan</option></select>); 
const Sedan =() =>(<select><option value = 'Indigo'>Indigo</option><option value='Xuv'>Xuv</option><option value = 'Accent'>Accent</option></select>); 

和你的开关等情况应该是这样的：

switch(ele){ 
    case 'hatchback': 
      ReactDOM.render(<Hatch/>,val); 
      break; 
    case 'sedan': 
      ReactDOM.render(<Sedan/>,val); 
      break; 
    case 'van': 
      ReactDOM.render(van,val); 
      break; 
    } 

请细小提琴环节的工作和测试副本以供参考： https://jsfiddle.net/69z2wepo/67343/

Answer 4

无需要DOM元素选择并向其添加动态内容。

为什么不使用React的威力来保持动态select框。

一个纯粹的React方法。尝试这样的事情。

class Rent extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.cars = { 
 
     hatchback : ['Indica', 'Swift', 'Logan'], 
 
     sedan : ['Indigo', 'Xuv', 'Accent'], 
 
     van : ['Omni', 'Vagon-R', 'Bolero'], 
 
     }; //refactor your cars data into key values 
 
     this.state = { 
 
     currentDropdown: this.cars.hatchback //initially first selection 
 
     } 
 
    } 
 

 
    changeModel = (event) => { 
 
     this.setState({ //changing state based on first selectbox value 
 
     currentDropdown: this.cars[event.target.value] 
 
     }); 
 
    } 
 

 
    render() { 
 
     return ( 
 
     <div> 
 
      <label className = "control-label" > Car Type < /label> 
 
      <select id ="car_type" onChange = {this.changeModel}> 
 
      <option value ="hatchback">Hatch Back</option > 
 
      <option value = "van" > Van < /option> 
 
      <option value ="sedan">Sedan</option > 
 
      </select> 
 
      <label className="control-label">Car Model</label > 
 
      <select id="car_model" placeholder = "Select Car model"> 
 
      { 
 
      this.state.currentDropdown.map(item => { 
 
       return <option key={item} value={item}>{item}</option> 
 
      })   
 
      } 
 
      </select> 
 
     </div> 
 
     ) 
 
    } 
 
} 
 
ReactDOM.render(<Rent /> , document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>