javascript - php button onclick




React onClick函數在渲染時觸發 (4)

JSX將 使用大括號 評估 JavaScript表達式

在這種情況下,將調用 this.props.removeTaskFunction(todo) 並將返回值分配給 onClick

您必須為 onClick 提供的功能。 為此,您可以將值包裝在匿名函數中。

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

我將2個值傳遞給子組件:

  1. 要顯示的對象列表
  2. 刪除功能。

我使用.map()函數顯示對象列表(如React教程頁面中給出的示例中所示),但是該組件中的按鈕在render上觸發 onClick 函數(不應在渲染時觸發)。 我的代碼如下所示:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

我的問題是:為什麼 onClick 函數會在渲染上觸發,以及如何使其不觸發。


JSX與ReactJS一起使用,因為它與HTML非常相似,它使程序員有使用HTML的感覺,而最終卻可以轉換為javascript文件。

編寫for循環並將函數指定為{this.props.removeTaskFunction(todo)}會在每次循環觸發時執行這些函數。

要停止這種行為,我們需要將函數返回給onClick。

粗箭頭功能具有一個隱藏的 return 語句以及 bind屬性 。 因此,它會將函數返回給OnClick, 因為Javascript也可以返回函數

採用 -

onClick={() => { this.props.removeTaskFunction(todo) }}

意思是-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);


對於那些不使用箭頭功能但更簡單的東西...我在signOut函數後添加括號時遇到了這個問題...

替換 <a onClick={props.signOut()}>Log Out</a>

與此 <a onClick={props.signOut}>Log Out</a> ...! 😆





reactjs