ตอบสนองฟังก์ชั่น onClick fires เมื่อแสดงผล

ฉันส่งค่า 2 ค่าไปยังคอมโพเนนต์ชายน์:

1. รายการของวัตถุที่จะแสดง
2. ฟังก์ชั่นลบ

ฉันใช้ฟังก์ชั่น. map () เพื่อแสดงรายการวัตถุของฉัน (เช่นในตัวอย่างที่ให้ไว้ในหน้าการตอบสนองต่อการกวดวิชา) แต่ปุ่มในองค์ประกอบนั้นจะทำการ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ฟังก์ชั่นนี้จึงใช้ไฟในการเรนเดอร์และทำไม่ได้?

เนื่องจากคุณกำลังเรียกใช้ฟังก์ชันนั้นแทนที่จะส่งผ่านฟังก์ชันไปยัง onClick ให้เปลี่ยนบรรทัดเป็น:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> เรียกว่าฟังก์ชั่นลูกศรซึ่งเปิดตัวใน ES6 และจะได้รับการสนับสนุนใน React 0.13.3 หรือสูงกว่า

แทนที่จะเรียกใช้ฟังก์ชันผูกค่ากับฟังก์ชัน:

this.props.removeTaskFunction.bind(this, todo)

อ้างอิง MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

ค่าสำหรับonClickแอตทริบิวต์ของคุณควรเป็นฟังก์ชันไม่ใช่การเรียกใช้ฟังก์ชัน

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>

สำหรับผู้ที่ไม่ได้ใช้ฟังก์ชั่นลูกศร แต่สิ่งที่ง่ายกว่า ... ฉันพบสิ่งนี้เมื่อเพิ่มวงเล็บหลังจากฟังก์ชั่น signOut ของฉัน ...

แทนที่สิ่งนี้ <a onClick={props.signOut()}>Log Out</a>

ด้วยสิ่งนี้<a onClick={props.signOut}>Log Out</a>... ! 😆

JSX ใช้ร่วมกับ ReactJS เนื่องจากคล้ายกับ HTML และให้ความรู้สึกกับโปรแกรมเมอร์ในการใช้ HTML ในขณะที่ transpiles เป็นไฟล์จาวาสคริปต์ในที่สุด

การเขียนสำหรับ for-loop และฟังก์ชั่นการระบุเป็น {this.props.removeTaskFunction (todo)} จะดำเนินการฟังก์ชั่นเมื่อใดก็ตามที่มีการเรียกวง

ในการหยุดพฤติกรรมนี้เราต้องส่งคืนฟังก์ชันกลับไปที่ onClick

ฟังก์ชั่นลูกศรไขมันมีซ่อนผลตอบแทนคำสั่งพร้อมกับคุณสมบัติการผูก ดังนั้นมันจะส่งคืนฟังก์ชันไปยัง OnClick เนื่องจาก Javascript สามารถส่งคืนฟังก์ชันได้เช่นกัน !!!!!

ใช้ -

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

ซึ่งหมายความว่า-

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

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>
        );
    }
});

ฉันมีปัญหาที่คล้ายกันรหัสของฉันคือ:

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

มันควรจะอยู่ที่ไหน

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

ในRenderRadioInput

มันแก้ไขปัญหาสำหรับฉัน