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

我的网站看起来像：

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

每个选择处都有下拉框。

当选择了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});
}

最佳答案

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以外的国家/地区，则会呈现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>

关于javascript - 禁用表单(可选下拉框)时如何设置样式？ (响应式(Reactive)引导)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56635083/