我正在练习反应，并尝试通过单击提交按钮将项目添加到输入列表中。
我更喜欢使用 state 和 setState
我很想得到一些帮助。
我认为不需要我的代码，但无论如何这是它：
class App extends Component {
state = {
userInput: ""
}
inputChangeHandler = (e) => {
this.setState({userInput: e.target.value})
}
listAddHandler = () => {
var listElement = document.createElement('li')
listElement.appendChild("ul")
}
render() {
return (
<div className="checklist">
<h1>This is an inventory</h1>
<input type="text" value={this.state.userInput} onChange={this.inputChangeHandler} placeholder="Insert item"/>
<button onClick={this.listAddHandler}>Submit</button>
<ul>
<li>
</li>
</ul>
</div>
)
}
}
您需要以数组的形式跟踪您所在州内列出的项目：
const { Component } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
class App extends Component {
state = {
listItems: [],
userInput: '',
}
inputChangeHandler = ({target:{value}}) => this.setState({
userInput: value
})
submitHandler = e =>{
e.preventDefault()
this.setState({
listItems: [...this.state.listItems, this.state.userInput],
userInput: ''
})
}
render() {
return (
<div>
<ul>
{
this.state.listItems.map((li,key) => <li {...{key}}>{li}</li>)
}
</ul>
<form onSubmit={this.submitHandler}>
<input value={this.state.userInput} onChange={this.inputChangeHandler} />
<input type="submit" value="Submit" />
</form>
</div>
)
}
}
render (
<App />,
rootNode
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
