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

Question

e.preventDefault() attached to form is not working and when I press save button, the page reloads on submission.

I have a seperate Form component that works just fine but I am unable to fix this one.

What am i doing wrong? Any help is greatly appreciated.

My code below

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;

Answer 1

It looks like in your constructor you are binding the function wrong:

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

The second function needs to bind against handleSubmit instead

Answer 2

I think it's first worth noting that without javascript (plain html), the form element submits when clicking either the <input type="submit" value="submit form"> or <button> submits form too </button> .

In javascript you can prevent that by using an event handler and calling e.preventDefault() on button click, or form submit. e is the event object passed into the event handler. With react, the two relevant event handlers are available via the form as onSubmit, and the other on the button via onClick .

<Button color="primary" onClick={this.onClickPreventDefault}>onClickPreventDefault</Button>

Example: http://jsbin.com/vowuley/edit?html,js,console,output

Answer 3

Areas changed:

1. Constructor not needed
2. Props was never being used around state, now just props
3. No need to create result variable
4. Move towards arrow functions reduces codebase 👌🏻
5. Toggle fn() - take from previous props it's faster!
6. Submit fn() - fire your props after state change, as setState() is not async

Other area for improvement:

1. You could make this a stateless component with useState()

   I hope this helps 👍🏻

class Todo extends Component {
  state = {
    isEditing: false
  };

  handleRemove = () => {
    this.props.removeTodo(this.props.id);
  };

  toggleEdit = () => {
    this.setState(({ isEditing }) => ({
      isEditing: !isEditing
    }));
  };

  handleChange = ({ target }) => {
    this.setState({
      [target.name]: target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    this.setState(
      {
        isEditing: false
      },
      () => {
        this.props.updateTodo(this.props.id, this.props.task);
      }
    );
  };

  render() {
    const { task } = this.props;

    return this.state.isEditing ? (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="task"
            value={task}
            onChange={this.handleChange}
          />
          <button type="sumbit">Save</button>
        </form>
      </div>
    ) : (
      <div>
        {task}
        <button onClick={this.handleRemove}>X</button>
        <button onClick={this.toggleEdit}>E</button>
      </div>
    );
  }
}

export default Todo;