Skip to content

Instantly share code, notes, and snippets.

@i-like-robots
Created September 15, 2017 10:27
Show Gist options
  • Save i-like-robots/0d6a8e20b0934d2e53d16e84ed56340c to your computer and use it in GitHub Desktop.
Save i-like-robots/0d6a8e20b0934d2e53d16e84ed56340c to your computer and use it in GitHub Desktop.
Normalize onChangeCapture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Preact Compat onChange normalization</title>
</head>
<body>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
constructor (props = {}) {
super(props)
this.state = {
value: ''
}
}
handleChange (e) {
this.setState({ value: e.target.value })
}
render () {
return (
<div onChangeCapture={this.handleChange.bind(this)}>
<label>Enter text</label>
<br />
<input value={this.state.value} />
<br />
<span>Output: <output>{this.state.value}</output></span>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
module.exports = {
entry: [
__dirname + '/src/index.js'
],
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'buble-loader' }
]
},
resolve: {
alias: {
'react': 'preact-compat',
'react-dom': 'preact-compat'
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment