<div id="root"></div>
// 输入组件
function InputView(props) {
return (
<div>
<input
type="text"
onKeyDown={props.onChange}
placeholder="输入 ...... ↩"
/>
</div>
)
}
// 展示组件
function ListView(props) {
return (
<ol>
{props.datas &&
props.datas.map((item, index) => (
<li key={index.toString()}>{item}</li>
))}
</ol>
)
}
// 容器组件
class ContainerView extends React.Component {
constructor(props) {
super(props)
this.state = {list: []}
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
if (e.keyCode === 13) {
const value = e.target.value
e.target.value = ''
this.setState((state, props) => {
let list = state.list
list.push(value)
return {list}
})
}
}
render() {
return (
<div>
<InputView onChange={this.handleChange} />
<ListView datas={this.state.list} />
</div>
)
}
}
ReactDOM.render(
<h1>
<ContainerView />
</h1>,
document.getElementById('root')
);
View Compiled
This Pen doesn't use any external CSS resources.