为什么触发方法？

Question

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

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>

为什么触发方法？

Why triggered method?

javascript

reactjs

redux

react-redux