React checkbutton onChange 事件返回合成事件

Question

我有一個 React 復選框組件。 我試圖在每次點擊時更改 state，並根據之前的 state 運行 function。在 React 上，每次我單擊按鈕時，我都試圖將事件返回到 index.js 中的 console.log function。

但它總是返回合成事件，我無法達到 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'))

我的 ReactCheckBox 組件是；

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

有沒有人有同樣的問題？ 我怎樣才能克服合成事件並獲得真實事件，以便實現它的價值？

更新

綜合錯誤事件

index.js:1375 警告：出於性能原因，此合成事件被重用。 如果您看到這一點，則表示您正在訪問已發布/已取消的合成事件的方法currentTarget 。 這是一個空操作 function。如果您必須保留原始合成事件，請使用 event.persist()。 有關詳細信息，請參閱 fb.me/react-event-pooling。

Answer 1

嘗試這樣做：

<input onChange={e => onChangeHandler(e.target.value)}></input>

Answer 2

可以使用event.currentTarget代替event.target來獲取特定的目標元素。

• event.currentTarget文檔
• 關於event.target和event.currentTarget的一篇不錯的文章

更新：關於您的更新和錯誤，您可以嘗試這樣做：代替使用<input onChange={this.onChangeHandler}>做到這一點：

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

要不就：

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

所以整行是：

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

Answer 3

如果您想要結果，Yoy可以嘗試This。

console.log(event.currentTarget.checked);

它將返回true或false

不需要做

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

UPDATE

綜合錯誤事件

index.js：1375警告：出於性能原因，此合成事件被重用。 如果看到此消息，則說明正在釋放/無效的綜合事件上訪問方法currentTarget。 這是一項無操作功能。 如果必須保留原始的合成事件，請使用event.persist（）。 有關更多信息，請參見fb.me/react-event-pooling。

簡單的只是打電話。

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