e.preventDefault(); 不适用于导入的自定义按钮组件反应 js

Question

I am building a form and I imported a custom Button component with an onCLick. In my handleClick function I added e.preventDefault as I wanted to see if the inputs from the form worked. It worked fine yesterday when I just used a normal button, but its not working after adding the Button component. Please what am I missing here?

 import React from 'react'; import PageContainer from '../../layout/page-container/PageContainer'; import newlogin from './newlogin.scss' import Button from '../../components/button/Button'; class NewInput extends React.Component { constructor(props) { super(props); this.state = { name: '', email: '', password: '' }; } handleName = (e) => { console.log(e.target.value) this.setState ({ name: e.target.value }); } handleEmail = (e) => { console.log(e.target.value) this.setState ({ email: e.target.value // [e.target.name]: e.target.value }); } handlePassword = (e) => { console.log(e.target.value) this.setState ({ password: e.target.value }); } handleSubmit = (e) => { console.log('Submitting'); console.log(this.state); } render(){ const { email, password } = this.state; return ( <PageContainer title="Login"> <form> <input name='name' type='text' placeholder='Enter your name' value={this.state.name} onChange={this.handleName} /> <input name='email' type='text' placeholder='Enter your email' value={this.state.email} onChange={this.handleEmail} /> <input name='password' type='password' placeholder='Enter your password' value={this.state.password} onChange={this.handlePassword}/> <Button size='small' color='warning' onClick={this.handleSubmit (e.preventDefault())}>Login</Button> </form> <p>Your email is: {this.state.email}</p> </PageContainer> <:-- begin snippet: js hide: false console: true babel: false --> type Props = { children, any? type:, string? size:, string? color:, string? outline:: string } const Button = (props.Props) => { let btnClass = '' if(props;type === 'full') btnClass = 'full '. if(props;type === 'inline') btnClass = 'inline '. if(props.type === 'block') btnClass = 'block ' if(props;size === 'small') btnClass += 'small '. if(props;size === 'large') btnClass += 'large '. if(props.color === 'primary') btnClass += 'primary ' if(props.color === 'warning') btnClass += 'warning ' if(props.color === 'info') btnClass += 'info ' if(props.outline === 'transparent') btnClass += ' transparent' return ( <button className={btnClass} > {props;children}</button> ); }; export default Button;

Answer 1

preventDefault in handleSubmit:

handleSubmit = e => {
    e.preventDefault() // preventDefault here
    console.log('Submitting');
    console.log(this.state);
}

Call handleSubmit in Button:

onClick={this.handleSubmit}

---

Edit, pass props into Button like this

type Props = {
  children: any,
  type?: string,
  size?: string,
  color?: string,
  outline?: string,
  onClick?: any // define onClick in Props Type
}
const Button = (props:Props) => {
  let btnClass = "";
  ...
  ...
  return (
    <button className={btnClass} {...props}> // here
      {props.children}
    </button>
  );
};

Answer 2

You are not a passing the handler to the button, you are calling it passing the return value. It has to be just:

<Button size='small'  color='warning' onClick={this.handleSubmit}>Login</Button>

Then use preventDefault() inside of the handler:

handleSubmit = (e) => {
  e.preventDefault();

  console.log('Submitting');
  console.log(this.state);

  // ...
}

Answer 3

When you submit a form, the form submit event will be fired which will refresh the page by default, so you have to hook in to the onSubmit method of the form and call the preventDefault there, in order to fire the submit event on the button click you have to set type="submit" on the Button component.

Make your handleSubmit function like:

  handleSubmit = (e) => {
    e.preventDefault();

    console.log('Submitting');
    console.log(this.state);
  }

and in your form use it like:

    <form onSubmit={this.handleSubmit}>
        // ...
        // Input fields
        // ...


        <Button type="submit" size="small"  color="warning">Login</Button>
    </form>

Make sure that the Button component passes through the type prop.

const Button = ({ children, ...props }) => (
   <button {...props}>{children}</button>
)