Javascript 列表中的新项将消失

当我单击submit按钮添加一个新项目时，它会渲染一秒钟，然后消失。 当我检查数组时，该项未添加，不知道原因：(

代码笔：

HTML:

JavaScript:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ["basketball", "tv", "monopoly"],
      current: ''
    };

    this.getItems = this.getItems.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.add = this.add.bind(this);
  }

  add() {
    let arrayvar = this.state.items.slice();
    arrayvar.push(this.state.current);
    this.setState({ items: arrayvar });


    for (var i = 0; i < this.state.items.length; i++) {
      console.log(this.state.items[i]);
    }
  }

  handleChange(event) {
    this.setState({ current: event.target.value });
  }

  getItems() {
    for (var i = 0; i < this.state.items.length; i++) {
      console.log(this.state.items[i]);
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.add}>
          <span>New item: </span>
          <input id='input' type="text" onChange={this.handleChange}/>
          <input type="submit" />
        </form>
        <div>{this.state.items.map((item, i) => <li key={i}>{item}</li>)}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[“篮球”、“电视”、“垄断”]，
当前版本：“”
};
this.getItems=this.getItems.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.add=this.add.bind（this）；
}
添加（）{
设arrayvar=this.state.items.slice（）；
arrayvar.push（此.state.current）；
this.setState（{items:arrayvar}）；
对于（var i=0；i
{item}
）}
);
}
}
render（，document.getElementById（“根”））；

发生的情况是，表单提交时会触发一个

操作，默认情况下，如果没有提供，该操作将指向包含页面的url。提交时，将根据提供的操作（
get
/
post
）发送请求，然后重新加载页面

您必须防止表单在提交时出现默认行为

发生的情况是，表单提交时会触发一个
操作
，如果没有提供，则默认指向包含页面的url。提交时，会根据提供的操作（
get
/
post
）发送请求，然后重新加载页面

您必须防止表单在提交时出现默认行为

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ["basketball", "tv", "monopoly"],
      current: ''
    };

    this.getItems = this.getItems.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.add = this.add.bind(this);
  }

  add() {
    let arrayvar = this.state.items.slice();
    arrayvar.push(this.state.current);
    this.setState({ items: arrayvar });


    for (var i = 0; i < this.state.items.length; i++) {
      console.log(this.state.items[i]);
    }
  }

  handleChange(event) {
    this.setState({ current: event.target.value });
  }

  getItems() {
    for (var i = 0; i < this.state.items.length; i++) {
      console.log(this.state.items[i]);
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.add}>
          <span>New item: </span>
          <input id='input' type="text" onChange={this.handleChange}/>
          <input type="submit" />
        </form>
        <div>{this.state.items.map((item, i) => <li key={i}>{item}</li>)}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

  add(event) {
    event.preventDefault();

    ...
  }