2017-01-12 3 views
0
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_model поля выбора на основе car_type выбора box.I использовало reactJS визуализации функции для изменения виртуального DOM, а также попытался изменить фактический DOM с помощью .innerHTML функции, но ни один из них не работал вне.Как визуализировать окно выбора, основанное на значениях другого в ReactJS?

+0

вы можете использовать 'event.target.value' вместо' 'getElementById' в changeModel()' метода доступа к значению по 'event.target.value'. –

+0

в рендеринге, есть несоответствие '', u закрытая 'форма' дважды. –

ответ

0

попробовать это:

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/

+0

Давая это, столкнувшись с той же проблемой –

+0

Значение состояния не изменяется ... changeModel() не выполняется. –

+0

сделал u привязывал функцию 'onChange = {this.changeModel.bind (this)} 'проверьте, что' jsfiddle' использует тот же код, он будет работать. –

0

Вам необходимо привязать this к вашему onChange.

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

Причина этого заключается в том, что сфера применения функции изменяется, когда вызывается из другого контекста, если вы явно не связать функцию в определенное этом.

Сообщите мне, если после этого возникнут какие-либо трудности.

+0

Непосредственно привязка функции тоже не сработала. Тем не менее, я столкнулся с той же проблемой –

0

Вы не должны возвращать строку в 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/

0

Нет необходимо выбрать элемент 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>

Смежные вопросы