Как я могу стилизовать мою форму (выбираемый выпадающий список), когда она отключена? (реагирует бутстрап) - PullRequest
Новая
       14

Как я могу стилизовать мою форму (выбираемый выпадающий список), когда она отключена? (реагирует бутстрап)

0 голосов
/ 17 июня 2019

Мой сайт выглядит следующим образом:

страна _______ -> штат _________ -> город _________

Где выпадающие списки находятся при каждом выборе.

Когда выбран country, отличный от USA, я отключаю выбор state, и он отображается, но он неактивен и ничего не может быть выбрано.

Я хочу состояниеполе выбора, чтобы полностью исчезнуть или, по крайней мере, просто превратиться в серое поле без текста. 

<ControlLabel>State</ControlLabel>

<FormControl
    componentClass="select"
    value={this.state.state} 
    name="state"
    onChange={this.handleChange}
>
    { data["state"].map((d) => <option key={d} value={d} disabled={this.state.disabled_state}>{d}</option>) }
</FormControl>

if(name === "country" && (value === "China" || value === "Brazil")) {
    this.setState({ disabled_state : true});
}

1 Ответ

0 голосов
/ 18 июня 2019

JSX позволяет вам сделать это напрямую. Просто присвойте переменной необходимый код JSX, в зависимости от disabled_state, и визуализируйте эту переменную позже. Если вы не хотите ничего визуализировать, просто присвойте переменной null или пустую строку:

Объявите другой код JSX в зависимости от disabled_state: 

const stateFormControl = this.state.disabled_state
    ? (
          <div>disable_state is true</div>
      )
    : (
          <FormControl
              componentClass="select"
              value={this.state.state} 
              name="state"
              onChange={this.handleChange}
          >
              { data["state"].map((d) => <option key={d} value={d} disabled={this.state.disabled_state}>{d}</option>) }
          </FormControl>
      );

И при возврате компонента визуализируем эту переменную: 

<ControlLabel>State</ControlLabel>
{ stateFormControl  }

Здесь у вас есть рабочий фрагмент. Если вы выбираете страну, отличную от USA, вместо элемента FormControl отображается элемент Alert: 

const { Form, Alert } = ReactBootstrap;
const FormControl = Form.Control;

const FormExample = () => {
  
  const [state, setState] = React.useState(true);
  const countriesOptions = ["USA", "CHINA", "KOREA"];
  const statesOptions = ["Alabama", "Alaska", "Arizona"];
  
  const countrySelected = (evt) => setState(evt.target.value === "USA");
  
  const stateElement = state
    ? (
          <FormControl as="select">
              { statesOptions.map(s => <option key={s}>{s}</option>) }    
          </FormControl>
      )
    : (
          <Alert variant="danger">No state for this country</Alert>
      );
  
  return (
    <Form>
      <FormControl as="select" onChange={countrySelected}>
        { countriesOptions.map(c => <option key={c}>{c}</option>) }
      </FormControl>
      { stateElement }
    </Form>
  );
  
};

ReactDOM.render(
  <FormExample />,
  document.getElementById('example')
);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>

<div id="example"></div>
...