Phản ứng chức năng onClick kích hoạt khi kết xuất

Tôi truyền 2 giá trị cho một thành phần con:

1. Danh sách các đối tượng cần hiển thị
2. xóa chức năng.

Tôi sử dụng hàm .map () để hiển thị danh sách các đối tượng của mình (như trong ví dụ được đưa ra trong trang hướng dẫn phản ứng), nhưng nút trong thành phần đó kích onClickhoạt chức năng, khi kết xuất (không nên kích hoạt thời gian kết xuất). Mã của tôi trông như thế này:

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

Câu hỏi của tôi là: tại sao onClickchức năng kích hoạt kết xuất và làm thế nào để nó không hoạt động?

Vì bạn đang gọi hàm đó thay vì chuyển hàm cho onClick, hãy thay đổi dòng đó thành:

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

=> được gọi là Chức năng Mũi tên, được giới thiệu trong ES6 và sẽ được hỗ trợ trên React 0.13.3 trở lên.

Thay vì gọi hàm, liên kết giá trị với hàm:

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

Tham chiếu MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Giá trị cho onClickthuộc tính của bạn phải là một hàm, không phải là một hàm gọi.

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

Đối với những người không sử dụng các hàm mũi tên nhưng đơn giản hơn ... Tôi đã gặp phải điều này khi thêm dấu ngoặc đơn sau hàm SignOut của mình ...

thay thế cái này <a onClick={props.signOut()}>Log Out</a>

với điều này <a onClick={props.signOut}>Log Out</a>...! 😆

JSX được sử dụng với ReactJS vì nó rất giống với HTML và nó mang lại cho các lập trình viên cảm giác sử dụng HTML trong khi cuối cùng nó chuyển sang một tệp javascript.

Viết hàm for-loop và chỉ định là {this.props.removeTaskFunction (todo)} sẽ thực thi các chức năng bất cứ khi nào vòng lặp được kích hoạt.

Để dừng hành vi này, chúng tôi cần trả lại chức năng cho onClick.

Hàm mũi tên chất béo có một tuyên bố trả lại ẩn cùng với thuộc tính liên kết . Do đó, nó trả lại chức năng cho OnClick vì Javascript cũng có thể trả về các chức năng !!!!!

Sử dụng -

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

nghĩa là-

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

JSX sẽ đánh giá các biểu thức JavaScript trong dấu ngoặc nhọn

Trong trường hợp này, this.props.removeTaskFunction(todo)được gọi và giá trị trả về được gán choonClick

Những gì bạn phải cung cấp cho onClicklà một chức năng. Để làm điều này, bạn có thể bọc giá trị trong một hàm ẩn danh.

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

Tôi đã có vấn đề tương tự, mã của tôi là:

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

    }

Nó nên ở đâu

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

trong RenderRadioInput

Nó đã khắc phục vấn đề cho tôi.