为什么单选按钮切换没有反映在 redux 状态变量中？答案

【问题标题】：Why radio button switching is not reflecting in redux state variable?为什么单选按钮切换没有反映在 redux 状态变量中？
【发布时间】：2021-09-20 15:23:11
【问题描述】：

我正在开发一个 react.js 应用程序，我正在使用 redux 状态管理。我创建了 2 个单选按钮，我正在它们之间切换并相应地设置状态变量。

这是我的活动按钮：

    <form >
      <input type="radio" id="html" name="status" value="HTML" onClick={this.setClientStatus("Active")}/>
      <label for="html">Active</label><br/>
      <input type="radio" id="css" name="status" value="CSS" onClick={this.setClientStatus("InActive")}/>
      <label for="css">InActive</label><br/>
   </form>

这是我的调度方法：

const mapDispatchToProps = dispatch => ({
  setClientName: clientName=>dispatch(onSetClientName(clientName)),
  setClientStatus:clientStatus=>dispatch(onSetClientStatus(clientStatus))
});

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

这是我改变状态的方法：

constructor(props) {
    super(props);
    this.setClientStatus=this.setClientStatus.bind(this);
  }
    setClientStatus(status)
      {
        this.props.setClientStatus(status)
      }

action.js

export const SET_STATUS='CLIENT/SET_STATUS'

actionCreator.js

export function onSetClientStatus(clientStatus)
{
  // console.log(clientStatus)
  return {type:Actions.SET_STATUS,clientStatus}
}

clientReducer.js

   const initialState = {
  clientStatus:"",
};
case Actions.SET_STATUS:{
      
      {
        console.log(action.clientStatus)
        return Object.assign({},state,{clientStatus:action.clientStatus})}
    }

即使我尝试在 actionCreator 或 reducer 中记录状态，而无需单击单选按钮，只要应用程序的状态由于其他状态变量而发生变化，我就会看到状态值的切换。我仅在 @987654331 上调用 setClientStatus 方法@ 的单选按钮，但我不知道它们是如何记录应用程序中的每个状态变化的。

这是我完整的工作应用程序。使用npm start 运行，然后转到add a client，然后在单选按钮之间切换。

Github 仓库here

谢谢

【问题讨论】：

标签： javascript html reactjs redux react-redux

【解决方案1】：

在两个输入的 onClick 属性中，您正在调用 setClientStatus 而不是传递函数。它发生在每次渲染上，这就是为什么您会看到它在其他状态更改时被切换。

代替：

onClick={this.setClientStatus("Active")}
onClick={this.setClientStatus("InActive")}

你可能需要：

onClick={() => this.setClientStatus("Active")}
onClick={() => this.setClientStatus("InActive")}

【讨论】：

谢谢你，不敢相信我错过了