mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
125 lines
2.9 KiB
HTML
125 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Inputs</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.01em;
|
|
font-size: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
.field {
|
|
padding: 8px;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid #aaa;
|
|
padding: 16px;
|
|
flex-grow: 1;
|
|
flex-basis: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">Loading...</div>
|
|
|
|
<script src="../react-loader.js"></script>
|
|
|
|
<script type="text/babel">
|
|
var Inputs = React.createClass({
|
|
|
|
getInitialState() {
|
|
return {
|
|
color: "#ffaaee"
|
|
}
|
|
},
|
|
|
|
renderControlled(type) {
|
|
let id = `controlled_${type}`
|
|
|
|
let onChange = e => {
|
|
let value = e.target.value
|
|
|
|
if (type === 'number') {
|
|
value = value == '' ? '' : parseFloat(value, 10) || 0
|
|
}
|
|
|
|
this.setState({
|
|
[type] : value
|
|
})
|
|
}
|
|
|
|
let state = this.state[type] || ''
|
|
|
|
return (
|
|
<div key={type} className="field">
|
|
<label htmlFor={id}>{type}</label>
|
|
<input id={id} type={type} value={state} onChange={onChange} />
|
|
→ {JSON.stringify(state)}
|
|
</div>
|
|
)
|
|
},
|
|
|
|
renderUncontrolled(type) {
|
|
let id = `uncontrolled_${type}`
|
|
|
|
return (
|
|
<div key={type} className="field">
|
|
<label htmlFor={id}>{type}</label>
|
|
<input id={id} type={type} />
|
|
</div>
|
|
)
|
|
},
|
|
|
|
render() {
|
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
|
let types = [
|
|
'text', 'email', 'number', 'url', 'tel',
|
|
'color', 'date', 'datetime-local',
|
|
'time', 'month', 'week', 'range', 'password'
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<h1>Input Kitchen Sink</h1>
|
|
<form onSubmit={e=>e.preventDefault()}>
|
|
<fieldset>
|
|
<legend>Controlled</legend>
|
|
{types.map(this.renderControlled)}
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Uncontrolled</legend>
|
|
{types.map(this.renderUncontrolled)}
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
|
|
ReactDOM.render(<Inputs />, document.getElementById('container'))
|
|
</script>
|
|
</body>
|
|
</html>
|