Если передать OnChange () в качестве опоры, может ли он получить несколько функций в родительском компоненте на ReactJs?

Question

Я новичок ie в React. Я передаю это от дочернего к родительскому компоненту

   <div className="filter-module">
                <i className="fas fa-sign-in-alt icon"></i>
                    <input 
                        name= "availabilityFrom"
                        onChange={(e)=>handleDateIn(e.target.value, e.target.name)}
                        type="date" 
                 />
            </div>

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

 handleDateIn= {this.handleFilterInputsDates;this.handleFilterInputs}

Но это не работает. Можно ли сделать что-то подобное? Я читал много похожих вопросов здесь, на SO, но все мои сомнения совпадали.

Заранее спасибо! : D

Answer 1

Вы можете передать «объект события» родительскому методу:

onChange={(e)=> handleDateIn(e)}

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

handleDateIn={this.handleFilters}

Предположим, мы реализуем «handleFilters» следующим образом

handleFilters = e => {
    this.handleFilterInputsDates(e.target.value);
    this.handleFilterInputs(e.target.name);
}

Надеюсь, я ответил правильно.

Answer 2

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

handleDateIn = (value, name) => {
  this.handleFilterInputsDates(/* Add whatever parameters you need */);
  this.handleFilterInputs(/* Add whatever parameters you need */);
}

Answer 3

ну без моего ведома реакция, я думаю, вы хотите:

handleDateIn= function(v,n) {
   handleFilterInputsDates(v,n);
   handleFilterInputs(v,n);
}

Answer 4

Я почти уверен, что это невозможно, но есть несколько разных подходов, которые вы можете использовать:

Добавьте еще prop, чтобы получить:

handleDateIn={this.handleFilterInputsDates} handleOtherIn={this.handleFilterInputs}

ИЛИ вы можете обновить свою функцию, чтобы посмотреть на event.target.type, а затем сделать что-нибудь, если это дата, или что-то еще в противном случае.

function handleIn(event) {
    if (event.target.type === 'date') {
        //code for date input, maybe even another function
    } else {
        //code for other types
    }
}

Тогда вам понадобится только одна опора:

handleIn={this.handleIn}

Answer 5

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

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