如何调用内部的多种功能的渲染中反应，和/ JSX

我试图返回多个函数中呈现，但它从另一个组件没有得到电话：---如何调用内部的多种功能的渲染中反应，和/ JSX

class OptionPanel extends React.Component { 

constructor(props){ 
    super(props); 
    this.onRemove = this.onRemove.bind(this); 
    this.onArrowUp = this.onArrowUp.bind(this); 
    this.onArrowDown = this.onArrowDown.bind(this);     
} 

onRemove(event){ 
    event.preventDefault(); 
    this.props.dispatch.deleteElement(this.props.DesignPanel.selectedElemId); 
    {/*event.currentTarget.parentElement.parentElement.parentElement.remove();*/} 
} 

onArrowUp(event){ 
    event.preventDefault(); 
    this.props.dispatch.moveElementUp(this.props.DesignPanel.selectedElemId); 
} 

render(){ 
    return( 
     <div> 
     {this.onRemove()} 
     {this.onArrowUp()} 
     </div> 
    ) 
} }

这会是在渲染方法中调用函数的正确方法？

来源

2017-05-26 user8053092

你并不需要延长React.Component如果你只是想从中导出功能，它

您可以创建一个单独的文件action.js

，并有

export function onRemove(event, dispatch, DesignPanel){ 
    event.preventDefault(); 
    dispatch.deleteElement(DesignPanel.selectedElemId); 

} 

export function onArrowUp(event, dispatch, DesignPanel){ 
    event.preventDefault(); 
    dispatch.moveElementUp(DesignPanel.selectedElemId); 
}

，然后导入它您需要调用它们的组件

import {onArrowUp, onRemove} from './path/to/action.js'

来源

2017-05-26 10:35:21

你在你的代码中所做的事情就是直接调用方法（onRemove（）和onArrowUp（）。它们将被调用，并且它们返回的任何内容都将被渲染。

所以：

请问这是调用渲染方法内部函数的正确方法是什么？

是的，这是正确的方法，但它只有有意义，如果这些函数将返回任何内容，应该呈现（如额外的组件）。

如果要将这些函数绑定到某些事件，则必须将这些函数作为属性添加到组件中。

对于一个按钮，它会是：

<button type="button" onClick={this.onClickHandle()}>Click me</button>

所以，只要按钮被点击，方法“onClickHandle”将被调用。

来源

2017-05-26 10:42:49 EatYaFood

你错过绑定事件处理程序的HTML标记事件

f.e

如果你想将其绑定到的onClick和KeyUp事件

render(){ 
    return( 
     <div> 
     <button onClick="{this.onRemove()}"> 
     <input keyUp="{this.onArrowUp()}"> 
     </div> 
    ) 
} 
}

来源

2017-05-26 10:52:30 Robert

如何调用内部的多种功能的渲染中反应，和/ JSX

回答

相关问题