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选择框。我使用reactJS渲染函数来修改虚拟DOM，并尝试使用.innerHTML函数修改实际DOM但没有他们解决了。

Answer 1

无需选择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>

Answer 2

试试这个：

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 3

您需要将this绑定到onChange。

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

这样做的原因是，当从不同的上下文调用时，函数的范围会发生变化，除非您将函数显式绑定到某个特定的上下文。

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

Answer 4

您不应该在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>);

你的swith案件应该是这样的：

 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/

如何根据ReactJS中另一个的值渲染一个选择框？

4 个答案: