Нужна помощь в том, как конвертировать Jquery .change () в React.js, чтобы показать / скрыть div - PullRequest
Новая
       24

Нужна помощь в том, как конвертировать Jquery .change () в React.js, чтобы показать / скрыть div

0 голосов
/ 26 марта 2019

У меня есть поле множественного выбора, которое показывает / скрывает различное в зависимости от того, что выбрано.Значения соответствуют их соответствующему классу.

Нужна помощь в преобразовании приведенного ниже кода Jquery, чтобы реагировать на отображение / скрытие соответствующих s

***** HTML *****

<select id="my_fields" name="my_fields" multiple="multiple">                                        
    <option value="gas">Gas</option>
    <option value="car_wash">Car Wash</option>
    <option value="parking">Parking</option>
    <option value="other">Other</option>
</select>


<div class="gas hide">show/hide gas</div> 
<div class="car_wash hide">show/hide car_wash</div>
<div class="parking hide">show/hide parking</div> 
<div class="other hide">show/hide other</div>

***** JQuery *****

$( "#my_fields" ).change(function () {
      $( "#my_fields option:selected" ).each(function() {                                  
            $( "."+ $(this).val() ).show();
      });

      $( "#my_fields option:not(:selected)" ).each(function() {
            $( "."+ $(this).val() ).hide();
      });
});

***** The React *****

.....imports and class.....

constructor(props) {
  super(props);
  this.state = {
    value: "",
    show:false,
  };

  this.handleChange = this.handleChange.bind(this);

 }
 handleChange(event) {

   this.setState({
     value: event.target.value,
     show: true
   })
 }


render() {
 var show = {
  display: this.state.show ? "block" : "none"
};

 return (
  <select    
       name="my_fields"
       multiple
       value={this.state.value}
       onChange={this.handleChange}
   >                                        
      <option value="gas">Gas</option>
      <option value="car_wash">Car Wash</option>
      <option value="parking">Parking</option>
      <option value="other">Other</option>
   </select>

   <div class="gas" style={ show }>show/hide gas</div> 
   <div class="car_wash" style={ show }>show/hide car_wash</div>
   <div class="parking" style={ show }>show/hide parking</div> 
   <div class="other" style={ show }>show/hide other</div>

 )

Ответы [ 2 ]

0 голосов
/ 29 марта 2019 
handleChange(event) {
     var options = event.target.selectedOptions;
     var value = [];
      for (var i = 0, l = options.length; i < l; i++) {
        if (options[i].selected) {
          value.push(options[i].value);
        }
      }


      this.setState({
        expenseCategory:[].slice.call(event.target.selectedOptions).map(o => {
              return o.value;
        }) 
      });
}
0 голосов
/ 26 марта 2019

Попробуйте, если это работает с некоторыми модификациями - 

state = {
  values: []
};

handleChange = event => {
  const options = Array.from(event.target.options);
  const selectedOptions = options.filter(op => op.selected);
  const selectedValues = selectedOptions.map(op => op.value);

  this.setState({ values: selectedValues });
}

с изменениями в return JSX 

...
{this.state.values.includes('gas') && <div class="gas">show/hide gas</div>}
{this.state.values.includes('car_wash') && <div class="car_wash">show/hide car_wash</div>}
{this.state.values.includes('parking') && <div class="parking">show/hide parking</div>}
{this.state.values.includes('other') && <div class="other">show/hide other</div>}
...