React-通过单击提交按钮将输入项添加到列表中 [英] React - Adding an item to a list from an input by clicking submit button

问题描述

我正在练习反应，我想通过单击提交"按钮将输入项添加到列表中.我更喜欢使用state和setState我需要一些帮助.

I'm practicing react and I'm trying to add an item to a list from input by clicking submit button. I prefer to use state and setState I'd LOVE some help.

我认为我的代码不是必需的，但无论如何都在这里:

I don't think my code is needed but here is it anyway:

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>

    )
  }
}

推荐答案

您需要以数组的形式跟踪状态内列出的项目:

You need to keep track of listed items within your state as an array:

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>

这篇关于React-通过单击提交按钮将输入项添加到列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！