Question

我的网站如下：

国家/地区________->州/省________->城市_________

每个选择处的下拉框在哪里。

当选择了cmake { targets 'MyGame' arguments "-DCMAKE_FIND_ROOT_PATH=", "-DANDROID_STL=c++_static", "-DANDROID_TOOLCHAIN=clang", "-DANDROID_ARM_NEON=TRUE" cppFlags "-frtti -fexceptions -fsigned-char -std=c++14" abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64' }以外的country时，我禁用了USA选择并显示了该选项，但是它变灰了，无法进行任何选择。

我希望状态选择框完全消失，或者至少只是变成没有文本的灰色框。

state

Answer 1

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>

禁用表单（可选下拉框）时如何设置样式？（反应式引导）

1 个答案:

禁用表单（可选下拉框）时如何设置样式？ （反应式引导）

1 个答案:

禁用表单（可选下拉框）时如何设置样式？（反应式引导）