React - 通过单击提交按钮将项目从输入添加到列表

Question

我正在练习反应，我正在尝试通过单击提交按钮将项目从输入添加到列表中。 我更喜欢使用 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>

    )
  }
}

Answer 1

您需要以数组的形式跟踪您所在州内列出的项目：

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>