public ReactElement <HTMLAttributes <HTMLDivElement> > Render()
{
// Create label:
Intersection <ClassAttributes <HTMLLabelElement>, HTMLAttributes <HTMLLabelElement> > labelConfig =
new ClassAttributes <HTMLLabelElement>
{
key = "label1"
};
var labelNode = DOM.label.Self(labelConfig, props.Label).AsNode();
// Create input:
Intersection <ClassAttributes <HTMLInputElement>, ChangeTargetHTMLAttributes <HTMLInputElement> > inputConfig =
new ChangeTargetHTMLAttributes <HTMLInputElement>
{
style = new CSSProperties
{
marginLeft = 20,
},
value = state.Value,
onChange = Handler.ChangeEvent <HTMLInputElement>(e =>
{
setState(new State {
Value = e.currentTarget.Type2.value
});
})
};
inputConfig.Type1.key = "input1";
var inputNode = DOM.input.Self(inputConfig).AsNode();
// Create button:
Intersection <ClassAttributes <HTMLButtonElement>, HTMLAttributes <HTMLButtonElement> > buttonConfig =
new HTMLAttributes <HTMLButtonElement>
{
style = new CSSProperties
{
height = 28,
width = 150,
marginLeft = 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 = DOM.button.Self(buttonConfig).AsNode();
// Create div:
var div = DOM.div.Self(new HTMLAttributes <HTMLDivElement> {
className = "wrapper"
}, new [] {
labelNode,
inputNode,
buttonNode
});
return(div);
}
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);
}
