Question

我正在尝试选择在检查时显示/隐藏但是选择只是渲染并且不会消失也不会重新出现。我很反应，所以我确信我做错了。

＆＃13;

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>
    );
  }
}

＆＃13;

我有一种感觉我只需要在onCheck函数中添加内容，但我不完全确定。任何帮助都会很棒！

Answer 1

我不确定你的组件CheckboxTree是做什么的，但这里有一些适用于常规输入控件的信息：

你的事件处理程序onChecked期望被检查为你的复选框的值，但实际上它将是一个事件对象。因此，您需要从事件对象中获取值并使用以下内容设置状态：

set beginning of input to platform
set beginning of input to fileName 
//hoping it will push platform to the second position

更新

我从文档中看到他们以同样的方式这样做，所以它应该有效，因为你的代码等同于：

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

Answer 2

你的病情应该是：

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

显示select on check reactjs

2 个答案: