01-Form-Simple.html
Dosyayı İndir
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<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 = {
propertyName: this.props.propertyName,
propertyLabel: this.props.propertyLabel,
propertyValue: this.props.propertyValue
}
this.updateState = this.updateState.bind(this);
};
updateState(e) {
this.setState({propertyValue: e.target.value});
}
render() {
var updateState=this.updateState;
return (
React.createElement('div', {},
React.createElement('label', {},this.state.propertyLabel),
' : ',
React.createElement('input',
{
type:'text',
value:this.state.propertyValue,
onChange:function(event){
updateState(event);
}
}
),
React.createElement('br'),
React.createElement('br'),
'Yeni Değer : ',
React.createElement('label', {},
this.state.propertyValue
)
)
);
}
}
var rootElement =React.createElement(TextInput,
{propertyName:'productName',propertyLabel:'Ürün Adı',propertyValue:'Cep Telefonu'});
ReactDOM.render(rootElement, document.getElementById('react-app'));
</script>
</body>
</html>
Dosyayı İndir 