Question

我有一个列表，并且正在将其映射到组件列表

sets ? sets.map(set => <Set set={set} key={set.setId}/>) : ""

该组件正在按预期方式呈现，但是没有事件在输入上触发

这是一个输入

 <input className="col s5" type="text" value={set.name} onChange={ (e) => this.updateSet(e.target.value, NAME) } placeholder="Name"></input>

我试图在更改时触发的功能最初来自redux存储

const mapDispatchToProps = dispatch => {
    return{
        updateSet: (exerciseId, setId, attributeToChange, newValue) => 
        dispatch(updateSet(exerciseId, setId, attributeToChange, newValue)),
        deleteSet: (exerciseId, setId) => dispatch(deleteSet(exerciseId, setId))
    };
};


export default connect(null, mapDispatchToProps)(Set);

我将其作为道具接收，然后在要调用的组件上创建本地函数

static get propTypes() {
    return {
        set: PropTypes.object,
        updateSet: PropTypes.func,
        deleteSet: PropTypes.func
    };
};

constructor(props) {
    super(props);

    this.updateSet = this.props.updateSet.bind(this);
    this.deleteSet = this.props.deleteSet.bind(this);
}

updateSet(newValue, attributeToChange){
    let exerciseId = this.props.set.exerciseId;
    let setId = this.props.set.setId;
    this.props.updateSet(exerciseId, setId, attributeToChange, newValue);
}

当我与该元素进行交互时，没有任何JavaScript错误，并且本地函数或商店中的断点都没有被击中。

Answer 1

您应该绑定类方法，而不是来自props的方法：

constructor(props) {
    super(props);

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

反应onChange事件不触发

1 个答案: