I’m trying to code a custom component to implement a TreeSelect from antdesign .
I have tried to get it working, but it seems retool does not like antd? I can’t get a button working.
The code works in a html codesandbox
Which is pretty much the same I have in the custom component in retool. Am I missing something?
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js"
crossorigin></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4.15.0/dist/antd.css"></script>
<script src="https://unpkg.com/antd@4.15.0/dist/antd.min.js"></script>
<div id="react"></div>
<script type="text/babel">
const { TreeSelect } = window.antd;
const { TreeNode } = TreeSelect;
let myState = { value: undefined };
const onChange = (value) => {
console.log(value);
myState = { value };
console.log("mystate", myState);
};
const MyCustomComponent = () => (
<div>
<TreeSelect
showSearch
style={{ width: "100%" }}
value={myState.value}
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="Please select"
allowClear
multiple
treeDefaultExpandAll
onChange={onChange}
>
<TreeNode value="Carpinteria" title="Carpinteria">
<TreeNode value="Beni" title="Beni" />
<TreeNode value="Miguel" title="Miguel" />
</TreeNode>
</TreeSelect>
</div>
);
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>