如何在TreeSelect中使用按钮添加页脚?

时间:2019-05-08 08:35:11

标签: reactjs antd

我正在尝试在菜单中添加页脚。仅当我添加一个选项但在多个选项中消失时,它才起作用:

脚出现在这里:

const { TreeSelect, Layout, Menu, Button } = antd;


const TreeNode = TreeSelect.TreeNode;
const {Header, Footer, Sider, Content,} =  Layout;
const {Item} = Menu;
class Demo extends React.Component {
  state = {
    value: undefined,
  }

  onChange = (value) => {
    alert(value);
    this.setState({ value });
  }

  render() {
    return (
      <TreeSelect
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}
      >


      <TreeNode title="option1" key="01"> 
                <TreeNode title="option1" key="01"> </TreeNode>
                <TreeNode title="option2" key="0-1"></TreeNode>
                <TreeNode title="option3" key="061"></TreeNode>
      </TreeNode>


    <Footer style={{ bottom: 0, left: 0, right: 0, height: '50px', padding: '10px'}}>
      <Button>click</Button>
      </Footer>                      
      </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

      //   {(()=>{
      //     return(
      //       <TreeNode value={"fasd"}  title={"dsf"} key="0-1">
      // </TreeNode>
      //     )
      // })()}

多个选项消失:

const { TreeSelect, Layout, Menu, Button } = antd;


const TreeNode = TreeSelect.TreeNode;
const {Header, Footer, Sider, Content,} =  Layout;
const {Item} = Menu;
class Demo extends React.Component {
  state = {
    value: undefined,
  }

  onChange = (value) => {
    alert(value);
    this.setState({ value });
  }

  render() {
    return (
      <TreeSelect
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}
      >


        <TreeNode title="option1" key="01"></TreeNode>
                <TreeNode title="option1" key="01"> </TreeNode>
                <TreeNode title="option2" key="0-1"></TreeNode>
                <TreeNode title="option3" key="061"></TreeNode>



    <Footer style={{ bottom: 0, left: 0, right: 0, height: '50px', padding: '10px'}}>
      <Button>click</Button>
      </Footer>                      
      </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

      //   {(()=>{
      //     return(
      //       <TreeNode value={"fasd"}  title={"dsf"} key="0-1">
      // </TreeNode>
      //     )
      // })()}

0 个答案:

没有答案