Beispiel #1
0
        public ReactElement <HTMLAttributes <HTMLDivElement> > Render()
        {
            // Create label:
            Intersection <ClassAttributes <HTMLLabelElement>, HTMLAttributes <HTMLLabelElement> > labelConfig =
                new ClassAttributes <HTMLLabelElement>
            {
                key = "label1"
            };

            var labelNode = createElement("label", labelConfig).AsNode();


            // Create input:
            Intersection <ClassAttributes <HTMLInputElement>, InputHTMLAttributes <HTMLInputElement> > inputConfig =
                new InputHTMLAttributes <HTMLInputElement>
            {
                style = new CSSProperties
                {
                    marginLeft = (Union <string, double>) 20
                },
                value    = state.Value,
                onChange = Handler.ChangeEvent <HTMLInputElement>(e =>
                {
                    state = new State {
                        Value = e.target.Type2.value
                    };
                    setState <KeyOf <State> >(state);
                    //System.Console.WriteLine(e.target.Type2.value);
                    //System.Console.WriteLine(state.Value);
                })
            };

            inputConfig.Type1.key = "input1";
            var inputNode = createElement("input", inputConfig).AsNode();

            // Create button:
            Intersection <ClassAttributes <HTMLButtonElement>, ButtonHTMLAttributes <HTMLButtonElement> > buttonConfig =
                new ButtonHTMLAttributes <HTMLButtonElement>
            {
                style = new CSSProperties
                {
                    height     = (Union <string, double>) 28,
                    width      = (Union <string, double>) 150,
                    marginLeft = (Union <string, double>) 20
                },
                dangerouslySetInnerHTML = new DOMAttributes <HTMLButtonElement> .dangerouslySetInnerHTMLConfig()
                {
                    __html = string.IsNullOrWhiteSpace(state.Value) ? "Enter text" : "Print to Console",
                },
                disabled = string.IsNullOrWhiteSpace(state.Value),
                onClick  = Handler.MouseEvent <HTMLButtonElement>(e =>
                {
                    props.OnSave(state.Value);
                })
            };

            buttonConfig.Type1.key = "button1";
            var buttonNode = createElement("button", buttonConfig).AsNode();

            // Create div:
            Intersection <ClassAttributes <HTMLDivElement>, HTMLAttributes <HTMLDivElement> > divConfig =
                new HTMLAttributes <HTMLDivElement>
            {
                className = "wrapper"
            };

            var div = createElement("div", divConfig, new[]
            {
                labelNode,
                inputNode,
                buttonNode
            });

            return(div);
        }