Javascript React checkbutton onChange事件返回合成事件

我有一个反应复选框组件。我试图在每次单击时更改状态，并基于以前的状态运行函数。在React上，每次单击按钮时，我都会尝试将事件返回到index.js中的console.log函数

但它总是返回合成事件，我无法达到event.target.value

我的index.js和道具是

ReactDOM.render(<ReactCheckBox
    isChecked={false}
    textCheck="Checked"
    textUncheck="Checked"
    onCheckedRun={event => console.log(event.target)}
    onUncheckedRun={event => console.log(event.target)}
    buttonPosition="right"
/>, document.getElementById('myCheckBox'))

ReactDOM.render（console.log（event.target）}
onUncheckedRun={event=>console.log（event.target）}
buttonPosition=“右”
/>，document.getElementById（'myCheckBox'））

我的组件是

import React, { Component } from 'react'

class ReactCheckBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            checked: ""
        }
        this.onChangeHandler = this.onChangeHandler.bind(this)

    }
    componentDidMount() {
        this.setState({
            checked: this.props.isChecked
        })
    }

    onChangeHandler(event) {
        this.setState(function (previousState, props) {
            console.log('State: ',this.state.checked)
            if (previousState.checked === true) {
                props.onCheckedRun(event)
            } else {
                props.onUncheckedRun(event)
            }
            return {
                checked: !this.state.checked
            }
        }
        )
    }

    render() {
        if (this.props.disabled === "true") {
            return (
                <div>
                    <div className="form-check">
                        <label className="form-check-label">
                            <div className="uniform-checker border-primary-600 text-primary-800">
                                <span className="checked">
                                    <input onChange={this.onChangeHandler} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} data-fouc="" disabled></input>
                                </span>
                            </div>
                            Primary checkbox
                        </label>
                    </div>
                </div>

            )
        }
        else {
            return (
                <div>
                    <div>
                        <div className="form-check">
                            <label className="form-check-label">
                                <div className="uniform-checker border-primary-600 text-primary-800">
                                    <span className={this.state.checked ? 'checked' : 'unchecked'}>
                                        <input onChange={this.onChangeHandler} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} ></input>
                                    </span>
                                </div>
                                Primary checkbox
                            </label>
                        </div>
                    </div>
                </div>
            )
        }
    }
}

export default ReactCheckBox

import React，{Component}来自“React”
类扩展组件{
建造师（道具）{
超级（道具）
此.state={
勾选：“”
}
this.onChangeHandler=this.onChangeHandler.bind（this）
}
componentDidMount（）{
这是我的国家({
选中：此.props.isChecked
})
}
onChangeHandler（事件）{
this.setState（函数（先前状态、道具）{
console.log（'State:'，this.State.checked）
if（previousState.checked==true）{
道具。onCheckedRun（事件）
}否则{
道具。onUncheckedRun（事件）
}
返回{
选中：！this.state.checked
}
}
)
}
render（）{
如果（this.props.disabled==“true”）{
返回(
主复选框
)
}
否则{
返回(
主复选框
)
}
}
}
导出默认值复选框

有人有过同样的问题吗？我怎样才能超越合成事件并获得真实事件，从而达到它的价值

更新

合成错误事件

js:1375警告：此合成事件被重用以提高性能 原因。如果您看到了这一点，那么您正在访问该方法

currentTarget

对已发布/无效的合成事件。这是一个 无操作功能。如果你必须保留原始合成事件， 使用event.persist（）。更多信息，请参见fb.me/react-event-pooling 信息

---

尝试使用

event.currentTarget

获取特定的目标元素，而不是

event.target

更新： 关于您的更新和错误，您可以尝试执行以下操作： 不要使用

执行以下操作：

<input onChange={(e)=>{this.onChangeHandler(e)}}>

{this.onChangeHandler（e）}}>

或者只是：

<input onChange={(e)=>{onchangeHandler(e)}}>

{onchangeHandler（e）}}>

因此，整条线将是：

<input onChange={()=>{this.onChangeHandler(e)}} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} ></input>

{this.onChangeHandler（e）}type=“checkbox”className=“form check input styled primary”defaultChecked={this.state.checked？'checked'：'unchecked'}>

如果你想要结果，你可以试试这个

console.log(event.currentTarget.checked);

它将返回true或false

没必要这么做

<input onChange={(e)=>{onchangeHandler(e)}}>

---

谢谢你的建议，我已经学到了一些东西，但我还是犯了同样的错误。我已经添加了错误，请查看更新的问题。@Capan ok查看我的更新。我认为您从未真正传递事件本身，因此其中一个修复程序应该解决这个问题，并传递适当的事件。让我知道它是否有效。问题仍在继续@aviya.developerWell我已经尝试了您的解决方案，但仍然存在相同的问题。event.currentTarget.value返回未定义的值复选框从不给出u

event.currentTarget.checked

。它仅以布尔形式返回选中或未选中状态<代码>事件.currentTarget.checked将为真或假@卡潘你可能想看看

 onChangeHandler(event) {
    event.persist();
    this.setState(function(previousState, props) {
      console.log("State: ", this.state.checked);
      if (previousState.checked === true) {
        props.onCheckedRun(event.currentTarget.checked);
      } else {
        props.onUncheckedRun(event.currentTarget.checked);
      }
      return {
        checked: !this.state.checked
      };
    });   }