Question

我创建了REACT组件，并使用Redux connect按下按钮将方法传递给调用。有一个代码：

const PageClientOne = ({onSubmit, onDelete, client}) => {
    return(
        <form style={styles.enter} onSubmit={_handleSubmit(client,onSubmit)}>
        // ... something code

            <Button type="submit" theme="success">Save</Button>
            <Button type="button"
                            theme="error" onClick={onDelete(client._id)}>Delete</Button>
        </form>
    )
}

const _handleSubmit = (client, onSubmit) => {
    return event => {
        event.preventDefault()
        onSubmit(client)
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        client: state.reducers.clientsState.client
    }
}

const mapDispatchToProps = (dispatch) => ({
    onSubmit: (client) => {
        dispatch(saveClient(client))
    },
    onDelete: (id) => {
        console.log("DELETE")
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PageClientOne)

问题是onDelete在页面加载时触发，而不仅仅是在单击按钮时触发。我做错了什么？

Answer 1

（我对React不太熟悉，所以这可能是错误的......）

创建<form>元素时，可以按如下方式定义按钮：

<Button type="button" theme="error" onClick={onDelete(client._id)}>Delete</Button>

括号中的代码 - {onDelete(client._id)} - 在创建元素时执行（在页面加载时），并将结果计算到插入到元素，而不是代码本身。你的意思是onclick属性正常;所以将代码放在引号""中，就像通常的HTML一样：

onclick="onDelete(client._id)"

Answer 2

在React中略有不同。

改变这一点，

<Button type="button" theme="error" onClick={onDelete(client._id)}>Delete</Button>

要，

<Button type="button" theme="error" onClick={()=>onDelete(client._id)}>Delete</Button>

请阅读此处了解更多信息，

https://facebook.github.io/react/docs/handling-events.html

Answer 3

问题在于onClick

<Button type="button" theme="error" onClick={onDelete(client._id)}>Delete</Button>

不是传递回调函数，而是在元素创建时调用onDelete。

尝试

<Button type="button" theme="error" onClick={onDelete.bind(this, client._id)}>Delete</Button>

希望它有所帮助。

Answer 4

我希望我的回答与您的问题相对应。当您刷新页面时，您的删除按钮似乎正在提交表单。因此，您需要阻止提交。

const mapDispatchToProps = (dispatch) => ({
    onSubmit: (client) => {
        dispatch(saveClient(client))
    },
    onDelete: (evt, id) => {
        evt.preventDefault()
        console.log("DELETE")
    }
}

在删除按钮上

<Button type="button" theme="error" onClick={(evt) => onDelete(evt, client._id)}>Delete</Button>

为何触发方法？

4 个答案: