表单未执行提交功能答案

【问题标题】：Form is not executing submit function表单未执行提交功能
【发布时间】：2018-10-02 11:59:58
【问题描述】：

我的onSubmit 函数中的代码永远不会执行，也不会出现任何错误。我将 Semantic-UI-React 与 graphql/mongoDB 后端一起使用，并将 apollo 作为客户端。前端框架是 Next.js。非常感谢任何关于为什么它没有进入提交功能的帮助！

整个组件类：

class EmployeeForm extends Component {
    state = {
        name: "",
        employeeID: "",
        mnemonic: "",
        errorMessage: "",
        loading: false
    }

    onSubmit = async (event) => {
        event.preventDefault();
        console.log('entering function');

        const newEmployeeWallet = ethers.Wallet.createRandom();
        this.setState({mnemonic: newEmployeeWallet.mnemonic});

        const {employeeID} = this.props;
        const mnemonic = this.state.mnemonic;
        await this.props.createEmployee({
            variables: { 
                employeeID, 
                mnemonic, 
            },
        }); 
        console.log(this.state.mnemonic);
        console.log(newEmployeeWallet.address); 

    };

    render() {
        return(
            <div>
                <h3>Authenticate a new Employee</h3>
                <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>                    
                    <Form.Field inline>
                        <Input label='Name' placeholder='Name' value={this.state.name} required={true} onChange={event => 
                        this.setState({ name: event.target.value })}/>
                    </Form.Field> 
                    <Form.Field inline>
                        <Input label='Employee ID' placeholder='Employee ID' value={this.state.employeeID} required={true} onChange={event =>
                        this.setState({ employeeID: event.target.value})}/>
                    </Form.Field> 
                    <Message error header='Error!' content={this.state.errorMessage} />          
                    <Button loading={this.state.loading} type='submit' primary>Submit</Button>
                </Form>
            </div>
        );
    }
}

const createEmployee = gql`
            mutation createEmployee($employeeID: String!, $name: String!) {
                createEmployee(input: {employeeID: $employeeID, name: $name}) {
                    employeeID
                    name
                }
            }
        `;

export default graphql(createEmployee, { name: 'createEmployee'})(EmployeeForm);

【问题讨论】：

标签： reactjs graphql next.js react-apollo semantic-ui-react

【解决方案1】：

当您的 React 组件使用 ES6 类时，您的方法不会自动绑定到您的组件实例，因此您需要在构造函数（最好）或方法调用中手动完成：

<Form onSubmit={this.onSubmit.bind(this)} ...

如果您在其他地方没有其他问题，这可以解决您的问题。在这里阅读更多：https://reactjs.org/docs/react-without-es6.html#autobinding

【讨论】：