javascript - 禁用时如何设置表单(可选下拉框)的样式？ ( react 引导)

Question

我的网站看起来像:

国家_______ -> 州________ -> 城市________

下拉框在每个选择中的位置。

当选择了 USA 以外的 country 时，我禁用了 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});
}

Answer 1

JSX允许你直接这样做。只需根据 disabled_state 将所需的 JSX 代码分配给一个变量，然后在稍后呈现该变量。如果您不想呈现任何内容，只需将 null 或空字符串分配给变量即可:

根据 disabled_state 声明不同的 JSX 代码:

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 以外的国家/地区，则会呈现 Alert 元素而不是 FormControl 元素:

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>