Question

当我单击提交按钮添加新项目时，反应呈现一秒钟然后消失。当我检查数组时，没有添加项目，不明白为什么：（

Codepen：

https://codepen.io/etasbasi/pen/RjoMMm?editors=1111

HTML：

<div id='root'></div>

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"));

Answer 1

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

您必须在提交时阻止表单的默认行为。 Event.preventDefault()

  add(event) {
    event.preventDefault();

    ...
  }

列表中的新项目消失

1 个答案: