在React / Redux中的On Click函数中传递Prop

Question

我有一个onClick函数调用一个名为toggleButton的动作创建器，它改变了this.props.UserOpen的状态。 以下代码WORKS并将UserOpen为true。

class ButtonComponent extends Component {
  render() {
    return (
      <div >
        <a href="javascript:;" onClick={this.props.toggleButton.bind(this, true)}>Click Me!</a>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { UserOpen: state.UserOpen };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({toggleButton}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent);

这是我想要合并的违规代码。

 <a href="javascript:;" onClick={this.props.toggleButton.bind(this, {!this.props.UserOpen})}>Click Me!</a>

当调用onClick ，我想在toggleButton参数中切换true和false之间的UserOpen prop。 这是可能的，还是我必须单独调用动作创建者？

编辑 - 更多代码

actions.js

export function toggleButton(status){
  return {
    type: BUTTON_OPEN,
    payload: status
 };

}

reducer.js

const INITIAL_STATE = { buttonOpen:true};

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case BUTTON_OPEN:
        return {...state, buttonOpen: action.payload};
  }
  return state;
}

Answer 1

如果它是关于切换状态属性的布尔值，那么你可以在reducer中轻松完成：

case SOME_TYPE: {
  return Object.assign({}, state, {
    UserOpen: !state.UserOpen
  })      
}

在这种情况下，您的操作创建者应该只具有type属性：

function toggleButton() {
  return {
    type: SOME_TYPE
  }
}

如果您坚持从组件传递属性，则可以执行以下操作：

class ButtonComponent extends Component {
  render() {
    this.toggleButton = this.props.toggleButton.bind(this)
    return (
      <div>
        <a href="javascript:;" onClick={function() { this.toggleButton(!this.props.UserOpen) }}> Click Me!</a>
      </div>
    );
  }
}

Answer 2

<a href="javascript:;" onClick={this.toggleButton(this)}>Click Me!</a>

在可能的情况下不在render方法中绑定值是一个好主意，也只是为了可读性如何：

toggleButton = () => {
  this.props.toggleButton(!this.props.userOpen)
} 

render() {
  return (
    <div >
      <a href="javascript:;" onClick={this.toggleButton}>Click Me!</a>
    </div>
  );
}

Answer 3

您不能更改组件的道具，除非它是数组或对象。 如果你真的想要更改道具，那么你可以将它包装到一个对象中并使用该值。 UserOpen将是一个包含其中value的对象。

<a href="javascript:;" onClick={this.props.toggleButton.bind(this, {!this.props.UserOpen.value})}>Click Me!</a>

但是，更新状态而不是道具是最佳做法。