Javascript 确定事件来自哪个组件

我有一个用于多个组件中的复选框的react组件

const Checkbox = (props) => {
    return (
        <Col>
            <div className="switch">
                <input id={props.value} type="checkbox" value={props.value} className="visually-hidden" onChange={props.handleChange}/>
                <label htmlFor={props.value} className="switch-label checkbox-label text-center">{props.label}</label>
            </div>
        </Col>
    )
}

export default Checkbox

---

我意识到这已经得到了回答，但被接受的答案是个坏主意™ 在我看来，所以我提供了这些简单的选择

1.传递不同的处理程序：

---

我意识到这已经得到了回答，但被接受的答案是个坏主意™ 在我看来，所以我提供了这些简单的选择

1.传递不同的处理程序：

---

您正在将相同的引用传递给

eventFormatsCopy

，您需要创建一个副本

让eventFormatsCopy=[…this.state.event_format]

否则您将改变您的状态数组可能因为我不理解这个问题，但您是否可以检查

target.name==='attenders'

？（我还假设是复选框组件？）如果我控制台记录event.target.name，它似乎是空白的。如果你向输入传递额外的道具，你将通过并返回名称：

。你传递的是对

eventFormatsCopy

的相同引用，你需要创建一个副本

让eventFormatsCopy=[…this.state.event\u格式];

否则您将改变您的状态数组可能因为我不理解这个问题，但您是否可以检查

target.name==='attenders'

？（我还假设是复选框组件？）如果我控制台记录event.target.name，它似乎是空白的。如果您向输入传递额外的道具，您将通过并返回名称：

。1号不满足的OPs要求“我想用一个函数来处理此组件的更改，但要计算出调用它的父组件”。@james Fair.这是一个奇怪的要求，闻起来像是设计缺陷，但我承认我没有花太多时间或精力在它上。1号不满足的OPs要求”我想用一个函数来处理这个组件的更改，但要计算出调用它的父组件。“@james Fair.这是一个奇怪的要求，闻起来像是设计缺陷，但我承认我没有花太多时间或精力在它上面。

export default class Attendees extends Component {
    state = {
        attendees: [
            {id: 1, value: 500, label: "0 - 500", checked: false},
            {id: 2, value: 1500, label: "500 - 1.5k", checked: false},
            {id: 2, value: 5000, label: "1.5k - 5k", checked: false},
            {id: 2, value: 10000, label: "5k - 10k", checked: false},
            {id: 2, value: 25000, label: "10k - 25k", checked: false},
            {id: 2, value: 50000, label: "25k - 50k", checked: false},
            {id: 2, value: 1000000, label: "50k+", checked: false},
        ]
    }

    render() {
        return (
            <div>
                <Row>
                    <Col>
                        <h4 className="ui centered question-header text-center">HOW MANY ATTENDEES DO YOU EXPECT?</h4>
                    </Col>
                </Row>
                <Row>
                    {
                        this.state.attendees.map((number) => {
                            return (<Checkbox name="attendees" key={number.value}
                                           handleChange={this.props.handleChange} {...number} />)
                        })
                    }
                </Row>
            </div>
        )
    }
}

constructor() {
        super();
        this.state = {
            event_format: [],
            attendees: 0,
        }

        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }

    handleCheckboxChange(event) {
        const target = event.target;
        let value = target.value;
        let eventFormatsCopy = this.state.event_format;
        if (target.checked) {
            eventFormatsCopy.push(value)
            this.setState({
                event_format: eventFormatsCopy
            })
        } else {
            const index = eventFormatsCopy.indexOf(value)
            eventFormatsCopy.splice(index, 1);
            this.setState({
                event_format: eventFormatsCopy
            })
        }
        console.log(this.state)
    }

  <Checkbox onChange={this.handleAttendeesChange} />
  <Checkbox onChange={this.handleOtherStuff} />

const Checkbox = (props) => {
    return (
        <Col>
            <div className="switch">
                <input
                    name={props.name} {/* pass the name prop to the input */}
                    id={props.value}
                    type="checkbox"
                    value={props.value}
                    className="visually-hidden"
                    onChange={props.handleChange}
                />
                <label htmlFor={props.value} className="switch-label checkbox-label text-center">{props.label}</label>
            </div>
        </Col>
    )
}

export default Checkbox

// unchanged from your example
<Checkbox
    name="attendees"
    key={number.value}
    handleChange={this.props.handleChange}
    {...number}
/>