Question

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

我有一个单独的Form组件，可以很好地工作，但我无法修复它。

我在做什么错？任何帮助将不胜感激。

我的下面的代码

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

在您的constructor中，您似乎错误地绑定了函数：

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

第二个功能需要绑定handleSubmit

Answer 2

我认为，首先值得注意的是，如果没有JavaScript（纯HTML），则在单击<input type="submit" value="submit form">或<button>时也会提交表单元素</button>。

在javascript中，您可以通过使用事件处理程序并在按钮单击或表单提交上调用e.preventDefault()来防止这种情况。 e是传递给事件处理程序的事件对象。通过react，两个相关的事件处理程序可以通过onSubmit形式使用，另一个可以通过onClick在按钮上使用。

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

示例：http://jsbin.com/vowuley/edit?html,js,console,output

Answer 3

区域已更改：

不需要构造函数
道具从未在州周围使用过，现在只是道具
无需创建result变量
移至箭头功能可减少代码库??
切换fn（）-从以前的道具中获取，更快！
提交fn（）-状态更改后触发道具，因为setState()不同步

其他需要改进的地方：

您可以使用useState()
将其设置为无状态组件
我希望这会帮助

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;

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

3 个答案: