如果将 OnChange() 作为 prop 传递，它能否在 ReactJs 上的父组件中接收多个函数？

Question

我是 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 上阅读了许多与我的类似问题，但任何与我的疑问相符。

先谢谢了

Answer 1

你不能从孩子传给父母。 您可以做的是将 function 从父级传递给子级，并在子级中使用该 function 来更新父级，因为 function 将在父级中触发。

或者，您可以将 state 挂钩传递到子节点并在那里更新它们，您将看到 state 在父节点中更新。

本质上，您不能从子代传递，但您可以将某些东西从父代传递给子代，子代可以用来更新父代。

Answer 2

好吧，我不知道反应我猜你想要：

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

Answer 3

我很确定这是不可能的，但是您可以采取几种不同的方法：

添加另一个prop ，以便您拥有：

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

或者您可以更新您的 function 以查看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 4

您可以在父组件上编写 function 并单独调用其他函数，传入您需要的参数。

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

Answer 5

您可以将“事件对象”传递给父方法：

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

在父组件中，您可以使用以下方法将调用拆分为两种不同的方法：

handleDateIn={this.handleFilters}

假设我们像这样实现“handleFilters”

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

希望我回答正确。