Question

我的onSubmit函数中的代码永远不会被执行，也不会出现任何错误。我正在使用带有graphol / mongoDB后端的Semantic-UI-React和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);

Answer 1

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

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

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

表单不执行提交功能

1 个答案: