03-Form-Composite.html
Dosyayı İndir
<!DOCTYPE html>
<html>
<body>
<div id="react-app">
</div>
<script src="https://cdn.jsdelivr.net/react/0.14.0/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0/react-dom.js"></script>
<script>
class TextInput extends React.Component {
constructor(props) {
super(props);
this.state = {
fieldName: this.props.fieldName,
fieldLabel: this.props.fieldLabel,
fieldValue: this.props.fieldValue
}
this.updateState = this.updateState.bind(this);
};
updateState(e) {
this.setState({fieldValue: e.target.value});
this.props.updateStateProp(e);
}
render() {
var updateState=this.updateState;
return (
React.createElement('div', {},
React.createElement('label', {},this.state.fieldLabel),
' : ',
React.createElement('input',
{
id:this.state.fieldName,
type:'text',
value:this.state.fieldValue,
onChange:this.updateState
}
),
React.createElement('br'),
React.createElement('br')
)
);
}
}
class ProductPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
product: this.props.product
}
this.updateState = this.updateState.bind(this);
};
updateState(e) {
if(e.target.id=='productId'){
this.state.product.productId=e.target.value;
this.setState({product: this.state.product});
}else if(e.target.id=='productName'){
this.state.product.productName=e.target.value;
this.setState({product: this.state.product});
}else if(e.target.id=='salesPrice'){
this.state.product.salesPrice=e.target.value;
this.setState({product: this.state.product});
}
}
saveObject(product) {
alert("Saklanıyor : "
+product.productId+" "
+product.productName+" "
+product.salesPrice+" ");
}
render() {
var updateState=this.updateState;
var saveObject=this.saveObject;
var product=this.state.product;
return (
React.createElement('div', {},
React.createElement(TextInput,
{
fieldName:'productId',
fieldLabel:'Ürün Kim',
fieldValue:this.state.product.productId,
updateStateProp:updateState
}),
React.createElement(TextInput,
{
fieldName:'productName',
fieldLabel:'Ürün Adı',
fieldValue:this.state.product.productName,
updateStateProp:updateState
}),
React.createElement(TextInput,
{
fieldName:'salesPrice',
fieldLabel:'Satış Ederi',
fieldValue:this.state.product.salesPrice,
updateStateProp:updateState
}),
React.createElement('br'),
'Yeni Değer : ',
React.createElement('label', {},
this.state.product.productId+" "
+this.state.product.productName+" "
+this.state.product.salesPrice
),
React.createElement('br'),
React.createElement('br'),
React.createElement('button',
{
onClick:function(event){
saveObject(product);
}
},
'Sakla'
)
)
);
}
}
var product={
productId:123,
productName:'Cep Telefonu',
salesPrice:1300.0
};
var rootElement =React.createElement(ProductPanel,{product:product});
ReactDOM.render(rootElement, document.getElementById('react-app'));
</script>
</body>
</html>
Dosyayı İndir 