javascript - 在检查reactjs上显示选择

Question

我试图让一个选择在检查时显示/隐藏，但选择只是呈现并且不会消失或重新出现。我对 react 还很陌生，所以我确信我做错了什么。

export default class TreeTest extends Component {
  constructor() {
    super();

    this.state = {
      checked: [
        '/grantSettingsPermissions/Admin',
        '/grantSettingsPermissions/ContentGroups/AddLocations', 
      ],
      expanded: [
        '/grantSettingsPermissions',
        '/grantSettingsPermissions/ContentGroups',
      ],
    };

    this.onCheck = this.onCheck.bind(this);
    this.onExpand = this.onExpand.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onCheck(checked) {
    console.log(checked);
    this.setState({
      checked,
    });
  }

  onExpand(expanded) {
    this.setState({
      expanded,
    });
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked,
    });
  }

  render() {
    const { checked, expanded } = this.state;
    const content = this.state.checked
    ? <select>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>
      : null;
    return (
            <div>
              { content }
              <CheckboxTree
                  checked={checked}
                  expanded={expanded}
                  nodes={nodes}
                  onCheck={this.onCheck}
                  onExpand={this.onExpand}
                  expandDisabled={true}
                  onChange={ this.handleChange }
              />
          </div>
    );
  }
}

我有一种感觉，我只需要向 onCheck 函数添加一些东西，但我不完全确定。任何帮助都会很棒!

Answer 1

您的情况应该是:

const content = this.state.checked.length === 0
  ? <select>
    <option value="test1">test1</option>
    <option value="test2">test2</option>
  </select>
  : null;