Question

我正在尝试将新项目添加到列表中。但是，由于某种原因，我的阻止默认功能和将项目添加到列表的功能都无法正常工作。代码在下面

import React from "react";
import "./list.css";

class List extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        list: ["Dark Night", "Whiplash", "Inception", "Moonlight", "Gladiator", "SpiderMan", "Batman", "Hulk", "Avengers", "Normal People", "Inbetweeners"]
      }
    }

addItem(e){
  e.preventDefault();
  const {list} = this.state;
  const newItem = 'test';

  this.setState({
    list: [...this.state.list, newItem]
  })
}

render(){
  const {list} = this.state;
    return(
      <div className='list'>
      {
        list.map(item => {
          return <p key={item}>{item}</p>
        })
      }
      <form>
        <div className='form-group' onSubmit={(e) => {this.addItem(e)}}>
        <label className='sr-only' htmlFor='newItemInput'> </label>
          <input type="text" placeholder="Whats to cool" id='newItemInput' />
          <button type="submit" className="listButton">Add</button>
        </div>

      </form>
      </div>
      );
  }
}

export default List;

Answer 1

onSubmit应该与form标签一起使用

但是您已将其与div一起使用，因此在这种情况下，e.preventDefault();可以防止：）

<form onSubmit={(e) => {this.addItem(e)}}>

工作代码段：

const { useState , useEffect } = React;

class App extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
        list: ["Dark Night", "Whiplash", "Inception", "Moonlight", "Gladiator", "SpiderMan", "Batman", "Hulk", "Avengers", "Normal People", "Inbetweeners"]
      }
    }

  addItem(e){
    e.preventDefault();
    const {list} = this.state;
    const newItem = 'test';

    this.setState({
      list: [...this.state.list, newItem]
    })
  }

  render(){
    const {list} = this.state;
      return(
        <div className='list'>
        {
          list.map(item => {
            return <p key={item}>{item}</p>
          })
        }
        <form  onSubmit={(e) => {this.addItem(e)}}>
          <div className='form-group'>
          <label className='sr-only' htmlFor='newItemInput'> </label>
            <input type="text" placeholder="Whats to cool" id='newItemInput' />
            <button type="submit" className="listButton">Add</button>
          </div>

        </form>
        </div>
        );
    }
  
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 2

在下面尝试此代码：

import React, {Component} from "react";
import "./list.css";

class List extends Component{
    state = {
        list: ["Dark Night", "Whiplash", "Inception", "Moonlight", "Gladiator", 
               "SpiderMan", "Batman", "Hulk", "Avengers", "Normal People", 
               "Inbetweeners"]
      }
    }

addItem = (e) => {
  e.preventDefault();
  const {list} = this.state;
  const newItem = 'test';

  this.setState({
    list: [...this.state.list, newItem]
  })
}

render(){
  const {list} = this.state;
    return(
      <div className='list'>
      {
        list.map(item => {
          return <p key={item}>{item}</p>
        })
      }
      <form onSubmit={e => this.addItem(e)}>
        <div className='form-group'>
        <label className='sr-only' htmlFor='newItemInput'> </label>
          <input type="text" placeholder="Whats to cool" id='newItemInput' />
          <button type="submit" className="listButton">Add</button>
        </div>

      </form>
      </div>
      );
  }
}

export default List;

为什么我的表单不将新项目添加到列表中？

2 个答案: