как добавить несколько onChange в реакцию для одного элемента ввода - PullRequest
Новая
       70

как добавить несколько onChange в реакцию для одного элемента ввода

2 голосов
/ 06 мая 2020

У меня проблемы с обработкой state-management и event management вместе в одном элементе ввода. 

    import React, { Component } from 'react';

export class profileDetail extends Component {
    continue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    };

    back = (e) => {
        e.preventDefault();
        this.props.prevStep();
    };
    render() {
        const { values, handleChange } = this.props;

        const imageHandler = () => {

            //Do this thing..
            //make this magic happen...
        };
        return (
            <div>
                Add your Profile Picture:
                <input
-----HERE------>    onChange={handleChange('ProfilePic')}
      &             defaultValue={values.ProfilePic}
-----HERE------>    onChange={imageHandler}
                    type="file"
                    name="inpFile"
                    id="inpFile"
                    accept="image/*"
                />
            </div>
        );
    }
}

export default profileDetail;

, если я добавляю два onChange на один ввод, как указано выше, либо я получаю управление состоянием, либо его манипуляцию DOM с onchange, которая начинает работать, но не то и другое.

Итак, как и какие изменения я должен внести, чтобы он работал правильно?

Ответы [ 5 ]

1 голос
/ 06 мая 2020

Попробуйте использовать их оба в одной функции, например onChange.

Также обратите внимание, что имя компонента должно быть в верхнем регистре, поэтому он не будет рассматриваться как элемент HTML. 

export class ProfileDetails extends Component {

  imageHandler = () => {
    /* ... */
  };

  onChange = () => {
    this.imageHandler();
    this.props.handleChange("ProfilePic");
  };

  render() {
    const { values } = this.props;

    return (
      <input
        onChange={this.onChange}
        defaultValue={values.ProfilePic}
        type="file"
        name="inpFile"
        id="inpFile"
        accept="image/*"
      />
    );
  }
}
0 голосов
/ 06 мая 2020

Вы можете просто создать функцию commonHandleChange, которая выполняет оба действия, ваш код будет выглядеть, как показано ниже. 

export class profileDetail extends Component {
   continue = (e) => {
     e.preventDefault();
     this.props.nextStep();
   };

   back = (e) => {
    e.preventDefault();
    this.props.prevStep();
   };

   const commonHandleChange = () => {
       // You can add conditions on which you want to execute both functions here, if you want to execute both function together.
       handleChange('ProfilePic');
       imageHandler();
   };
   render() {
      const { values } = this.props;

      return (
        <div>
            Add your Profile Picture:
            <input
                defaultValue={values.ProfilePic}
                onChange={commmonHandleChange}
                type="file"
                name="inpFile"
                id="inpFile"
                accept="image/*"
            />
        </div>
      );
  }
}
0 голосов
/ 06 мая 2020

Вы можете создать одну функцию, которая могла бы обрабатывать обе вещи за вас onChange: 

<input
  onChange={() => {
    handleChange('ProfilePic');
    imageHandler();
  }}
  {...props}
/>
0 голосов
/ 06 мая 2020

Вы можете использовать анонимную функцию для объединения двух методов, которые вы хотите вызвать, в один обработчик: 

<input
  onChange={() => {
    handleChange('ProfilePic');
    imageHandler();
  }}
  defaultValue={values.ProfilePic}
  type="file"
  name="inpFile"
  id="inpFile"
  accept="image/*"/>
0 голосов
/ 06 мая 2020 
export class profileDetail extends Component {
    continue = (e) => {
        e.preventDefault();
        this.props.nextStep();
        imageHandler = imageHandler.bind(this);
    };

    back = (e) => {
        e.preventDefault();
        this.props.prevStep();
    };
   const imageHandler = () => {

        //Do this thing..
        //make this magic happen...

        //and then call outer handler
        this.props.handleChange('ProfilePic');
    };
    render() {
        const { values } = this.props;

        return (
            <div>
                Add your Profile Picture:
                <input
                    defaultValue={values.ProfilePic}
                    onChange={imageHandler}
                    type="file"
                    name="inpFile"
                    id="inpFile"
                    accept="image/*"
                />
            </div>
        );
    }
}
...