React复选框的onChange事件返回合成事件。

Question

React复选框的onChange事件返回合成事件。

7

我有一个React复选框组件。我想在每次单击时更改状态并根据上一个状态运行函数。在React中，每次单击按钮时，我试图将事件返回给我的index.js中的console.log函数。

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

我的index.js和props如下；

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方法。这是一个无操作函数。如果必须保留原始合成事件，请使用event.persist()。有关更多信息，请参见fb.me/react-event-pooling。

- Capan

你可能想看看这里。 - Gabriel Arghire

3个回答

5

试着去做：

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

- Ricardo Kreutzer

现在它可以工作了 @Ricardo - Kimi Raikkonen 9790

2

如果你想要结果，可以尝试这个。最初的回答：

如果您需要结果，您可以尝试这个。

console.log(event.currentTarget.checked);

最初的回答：它将返回true或false。不需要做任何事。

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

更新

合成错误事件

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

- Rahul

我已经尝试了你的解决方案，但仍然存在相同的问题。event.currentTarget.value返回一个未定义的值。 - Capan

复选框永远不会给出 event.currentTarget.checked。它只返回已选或未选状态的布尔值。event.currentTarget.checked 将返回 true 或 false。@capan - Rahul

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aviya.developer · Accepted Answer

使用event.currentTarget代替event.target可以获取特定的目标元素。

更新: 与您的更新和错误相关，您可以尝试这样做：不要使用<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>