语法？错误导致React应用程序在更改处理程序[重复]后重置

Question

我知道这里有些不对劲，但我看不见。在下面的代码中，输入框的事件处理程序正常工作，但是保存的代码有问题。当我单击该按钮时，我可以看到事件处理程序启动，然后整个应用程序重置。有什么想法吗？

import React, { Component } from 'react';
import InputForm from './InputForm';
class Parent extends Component {
  constructor(props){
    super(props);
    this.state = {
      value: ""
    };
  }
  inputSavedHandler = (event) => {
    console.log("input saved-------------------");
  }
  inputChangedHandler = (event) => {
    this.setState({value: event.target.value});
  }
  render(){
    return(
      <div>
          <InputForm
            value={this.state.value}
            changed={this.inputChangedHandler}
            saved={this.inputSavedHandler}
          />
      </div>
    );
  }
}
export default Parent;

import React, { Component } from 'react';
class InputForm extends Component {
  render(){
    return(
      <div>
          <form onSubmit={this.props.saved}>
            <input type="text" className="input" value={this.props.value} onChange={this.props.changed} />
            <input type="submit" value="Add" />
          </form>
      </div>
    );
  }
}
export default InputForm;

Answer 1

您需要在InputSavedHandler中使用Event.PreventDefault防止表单提交