如果将 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>

在父级上，作为 prop 传递，我想使用相同的参数来执行两种不同的方法

 handleDateIn= {this.handleFilterInputsDates;this.handleFilterInputs}

但它不起作用。有没有可能做出类似的东西？我在 SO 上读过很多与我类似的问题，但任何一个都符合我的疑问。

提前致谢！ :D

Answer 1

您不能从 child 传递到 parent。您可以做的是将一个函数从 parent 传递到 child 并在 child 中使用该函数来更新 parent 因为该函数将在 parent.

或者，您可以将状态挂钩传递到 child 并在那里更新它们，您将在 parent 中看到正在更新的状态。

基本上你不能从 child 向上传递，但是你可以从 parent 向 child 传递一些东西，child 可以用它来更新 parent.

Answer 2

好吧，我猜你想在我不知道的情况下做出反应：

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

Answer 3

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

再添加一个 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 4

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

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

Answer 5

您可以将 'event object' 传递给父方法：

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

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

handleDateIn={this.handleFilters}

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

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

希望我回答正确。

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

If passing an OnChange() as a prop, can it receive multiple functions in the parent component on ReactJs?

javascript

reactjs

react-props

react-component