提问者:小点点

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


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

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;

共1个答案

匿名用户

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