e.preventDefault ();не работает на импортированном компоненте пользовательской кнопки реагировать JS - PullRequest
Новая
       4

e.preventDefault ();не работает на импортированном компоненте пользовательской кнопки реагировать JS

2 голосов
/ 06 ноября 2019

Я строю форму и импортировал пользовательский компонент Button с помощью onCLick. В моей функции handleClick я добавил e.preventDefault, как я хотел видеть, работают ли входные данные из формы. Вчера все работало нормально, когда я просто использовал обычную кнопку, но она не работает после добавления компонента Button. Пожалуйста, что мне здесь не хватает? 

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;

Ответы [ 3 ]

2 голосов
/ 06 ноября 2019

protectDefault в handleSubmit: 

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

Call handleSubmit in Button: 

onClick={this.handleSubmit}

Редактировать, передавать реквизиты в Button следующим образом 

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>
  );
};
0 голосов
/ 06 ноября 2019

Когда вы отправляете форму, происходит событие отправки form, которое по умолчанию обновляет страницу, поэтому вам нужно подключиться к методу onSubmit form и вызвать там preventDefault, чтобы запустить событие отправки по нажатию кнопки, вы должны установить type="submit" для компонента Button.

Сделайте вашу функцию handleSubmit похожей на: 

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

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

ив вашей форме используйте это как: 

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


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

Убедитесь, что компонент Button проходит через type проп. 

const Button = ({ children, ...props }) => (
   <button {...props}>{children}</button>
)
0 голосов
/ 06 ноября 2019

Вы не передаете обработчик кнопке, вы вызываете ее, передавая возвращаемое значение. Это должно быть просто: 

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

Затем используйте preventDefault() внутри обработчика: 

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

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

  // ...
}
...