javascript - 防止在提交表单时重新加载页面

Question

附加到表单的 e.preventDefault() 不起作用，当我按下保存按钮时，页面在提交时重新加载。

我有一个单独的表单组件，它工作得很好，但我无法修复这个。

我究竟做错了什么？任何帮助是极大的赞赏。

我的代码如下

TIA

class Todo extends Component {
  constructor(props){
      super(props);
      this.state = { isEditing: false, task: this.props.task }
      this.handleRemove = this.handleRemove.bind(this);
      this.toggleEdit = this.toggleEdit.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleChange.bind(this);
    }
  handleRemove () {
      this.props.removeTodo(this.props.id)
  };

  toggleEdit () {
      this.setState ({
          isEditing: !this.state.isEditing
      });
  }
  handleChange(e) {
      this.setState({
          [e.target.name]: e.target.value
      });
  }
  handleSubmit(e) {
      e.preventDefault();
      this.props.updateTodo(this.props.id, this.state.task);
      this.setState({
          isEditing: false
      })
  }
  render() {
   let result; 
    if (this.state.isEditing) {
        result = (
        <div>
            <form onSubmit={this.handleSubmit}>
                <input 
                    type='text'
                    name='task'
                    value={this.state.task}
                    onChange={this.handleChange}
                />
                <button>Save</button>
            </form>
        </div>
            )
    } else {
        result = (
        <div> 
            {this.props.task}
            <button onClick={this.handleRemove}>X</button>
            <button onClick={this.toggleEdit}>E</button>           
        </div>

        )
      }
    return result;
  }
}

export default Todo;

标签： javascriptreactjs

Answer 1

看起来您constructor的函数绑定错误：

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleChange.bind(this);

第二个函数需要handleSubmit绑定