时间戳

首页 > 解决方案 > 当 onClick 提交时不点击按钮调试器，而是在表单的每个 onChange 中点击它

reactjs - 当 onClick 提交时不点击按钮调试器，而是在表单的每个 onChange 中点击它

问题描述

在 chrome 开发工具中，我在按钮处设置了一个断点，用于提交表单。当我输入我的输入字段时，每次击键都会触发 handleSubmit 断点并正确更新状态 onChange 并在正确的情况下启用 Submit 按钮，但是当我实际单击 Submit 时，没有任何反应。它不会触发断点或运行 handleSubmit。我的服务器或控制台中没有错误。

这是组件：

import React, { Component } from 'react';
import { Form, Button, Container } from 'semantic-ui-react';
import { connect } from 'react-redux';
import axios from 'axios';

class BoardGameForm extends Component {

  state = { title: "", 
            max_players: "", 
            min_players: "", 
            game_company: "", 
            time_needed: "",
          }

  handleSubmit = (e) => {
    const { title,
            min_players, 
            max_players, 
            game_company, 
            time_needed 
          } = this.state 
    if (this.canBeSubmitted) {
      e.preventDefault(); 
      axios.post("/api/board_games", {
        title, 
        min_players,
        max_players,
        game_company,
        time_needed
      }).then(res => {
        console.log(res); 
      })
      return; 
    }
  }


  canBeSubmitted = () => {
   const {title, max_players, min_players, time_needed } = this.state; 
    return(
        title.length > 0 &&
        max_players.length > 0 &&
        min_players.length > 0 &&
        time_needed.length > 0 
    );
  }

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


  render() {
  const isEnabled = this.canBeSubmitted() 
  const {title, max_players, min_players, game_company, time_needed } = this.state 
    return (
      <Container > 
        <Form>
          <Form.Field>
            <label>Title</label>
            <Form.Input 
              name="title"
              value={title} 
              onChange={this.handleChange}
              required
            /> 
          </Form.Field>
          <Form.Group widths="equal">
            <Form.Field>
              <label>Min Players</label>
              <Form.Input 
                name="min_players"
                value={min_players}
                onChange={this.handleChange}
                required
              />
            </Form.Field>
            <Form.Field>
              <label>Max Players</label>
              <Form.Input 
                name="max_players"
                value={max_players}
                onChange={this.handleChange}
                required 
              /> 
            </Form.Field>
          </Form.Group>
          <Form.Field>
            <label>Game Company</label>
            <Form.Input 
              name="game_company"
              value={game_company}
              onChange={this.handleChange}
            />
          </Form.Field>
          <Form.Field>
            <label>Time Needed</label>
            <Form.Input 
              name="time_needed"
              value={time_needed}
              onChange={this.handleChange}
              required
            /> 
          </Form.Field>
        </Form>
        <Button disabled={!isEnabled} onClick={() => this.handleSubmit}>Submit</Button>
      </Container>
    )
  }
}

const mapStateToProps = state => {
  return { user: state.user };
};

export default connect(mapStateToProps)(BoardGameForm);

标签： reactjs

解决方案

您遇到此问题是因为您没有调用函数。

代码应该是

<Button disabled={!isEnabled} onClick={(e) => this.handleSubmit(e)}>Submit</Button>

甚至更简单

<Button disabled={!isEnabled} onClick={this.handleSubmit}>Submit</Button>

因为这已经绑定到上下文。

如果您更喜欢意识形态解决方案，您可能需要在代码中进行 2 处修改：

  1. 替换<Form>为<Form onSubmit={this.handleSubmit}>
  2. 添加type="submit"到<Button>组件而不是onClick.

推荐阅读