Question

在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);

Answer 1

由于没有调用函数，因此出现了此问题。

代码应为

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

或更简单的

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

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

如果您想要更多的意识形态解决方案，则可能需要在代码中进行2次修改：

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

提交onClick时未点击按钮调试器，而是与表单的每个onChange一起点击

1 个答案: