句法？错误导致 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 提交