02-Form-Object.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 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});
}
}
render() {
var updateState=this.updateState;
return (
React.createElement('div', {},
React.createElement('label', {},'Ürün Kim'),
' : ',
React.createElement('input',
{
id:'productId',
type:'text',
value:this.state.product.productId,
onChange:updateState
}
),
React.createElement('br'),
React.createElement('br'),
React.createElement('label', {},'Ürün Adı'),
" : ",
React.createElement('input',
{
id:'productName',
type:'text',
value:this.state.product.productName,
onChange:updateState
}
),
React.createElement('br'),
React.createElement('br'),
React.createElement('label', {},'Satış Ederi'),
" : ",
React.createElement('input',
{
id:'salesPrice',
type:'text',
value:this.state.product.salesPrice,
onChange:updateState
}
),
React.createElement('br'),
React.createElement('br'),
'Yeni Değer : ',
React.createElement('label', {},
this.state.product.productId+" "+
this.state.product.productName+" "+
this.state.product.salesPrice
)
)
);
}
}
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 