Как установить тип события в пользовательском дочернем компоненте из родительского компонента? - PullRequest
Новая
       14

Как установить тип события в пользовательском дочернем компоненте из родительского компонента?

0 голосов
/ 22 апреля 2020

Итак, у меня есть настраиваемый настраиваемый компонент ввода, который предполагается использовать в нескольких различных формах. «Конфигурация» для входного поля обрабатывается родительскими компонентами (проверки, тип поля ввода и т. Д. c.). Проблема в типе события. Например, в одной из форм мне нужно, чтобы тип события в поле ввода был onBlur, а в другой форме - onKeyDown. Вопрос в том, как я могу передать тип события из родительского компонента, который отображает пользовательский входной файл? Отказ от ответственности - я новичок в React, совершенно новичок в программировании и уже несколько дней ищу решение, но безрезультатно.

1 Ответ

0 голосов
/ 22 апреля 2020

Сначала определите ваш компонент, который содержит <input /> (или функцию) 

class MyClass extends Component {
  render() {
    // you can extract some of the props if you want to manipulate somehow. Everything else will be saved in rest
    const { value, name, ...rest } = this.props;
    return (
      <input value={value} name={name} {...rest} />
    )
  }
}

Затем к этому новому компоненту вы можете добавить любые реквизиты, доступные для тега <input/>, пример: 

class Test extends Component {
  render() {
    return (
    <Fragment>
      <MyClass value={5} name="Name" onBlur={this.onBlur} onFocus={this.onFocus} />
      <MyClass value="Hello, world!" id='randomId' onChange={e => console.log(e.target.value)} />
    </Fragment>
    )
  }

  onBlur = e => {
    console.log('Blur');
  }

  onFocus = e => {
    console.log('Focus');
  }
}

Теперь у вас есть два разных входа - один прослушивает onBlur и onFocus, другой имеет id и прослушивает onChange.

...