在检查 reactjs 上显示选择

Question

我试图让选择显示/隐藏检查，但选择只是呈现并且不会消失也不会重新出现。我对反应还很陌生，所以我确定我做错了什么。

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

我不确定您的组件 CheckboxTree 的作用，但这里有一些适用于常规输入控件的信息：

您的事件处理程序 onChecked 期望选中的是您的复选框的值，但实际上它将是一个事件对象。所以你需要从事件对象中获取值并设置状态：

  onCheck(e) {
    console.log(e);
    let checked = {checked: e.target.value}
    this.setState({
      checked,
    });
  }

更新

我从文档中看到他们正在以相同的方式执行此操作，因此它应该可以工作，因为您的代码等效于：

  onCheck={checked => this.setState({ checked })}
  onExpand={expanded => this.setState({ expanded })}

Answer 2

你的情况应该是：

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