React、Redux Form：更改处理程序不允许以任何方式翻转传递的参数

Question

最近遇到一个比较奇怪的问题。我在使用 redux 形式的反应中有一个 class 组件。 onChange 如果切换输入复选框，则会调用事件处理程序。两个参数 value 和 type（输入名称）被传递给事件处理程序。当我控制台记录 value 时，它正确显示了以前的值。但是，我不能以任何方式翻转此布尔值，即表达式 !value 或 let value = value?false:true 总是 returns true/false 取决于初始状态，而不管当前状态如何。我在 google & SO 上搜索以找到原因，但找不到相同的原因。非常感谢任何形式的帮助。

这里是代码供大家参考

class Example extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: true
    };
    this.handleChange = this.handleChange.bind(this);
  };

  handleChange(value, type) {
    console.log(value); //outputs previous value (before toggle)
    let currValue = value ? false:true; //this line is not working
    console.log(currValue); //outputs the same value (irrespective of state)
  } 

  render() {
   return (
      <div>
        <Field component="input" type="checkbox" name="name" id="name"
      onChange={({target}) => this.handleChange(target.value,target.name)}/> Name
      </div>
     );
  }
}

function mapStateToProps(state) {
    return state;
}

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

export default compose(
  reduxForm({
    form: 'example', key: 'example',
    initialValues: {
      name: true
    },
    enableReinitialize: true
  }),
  connect(mapStateToProps, mapDispatchToProps)
)(Example);

输出（切换两次：检查初始状态）

Answer 1

您没有设置 Field 的值。因此，您需要设置值：

<Field 
  component="input" 
  type="checkbox" 
  name="name" 
  id="name"
  onChange={({target}) => this.handleChange(target.value,target.name)}
  value={this.state.name || true}
/>

负责人：

handleChange(value, type) {
  this.setState({[type]: !value})
}

Answer 2

因为 value 的类型是字符串，所以您的翻转语句无法正常工作

因为 "false" 被认为是真实值。

console.log(Boolean("false"));

let currValue = false;
if(value == "false")
    currValue = true;

您的函数应如下所示

handleChange(value, type) {
    console.log(value); 
    let currValue = false;
    if(value == "false")
        currValue = true;
    console.log(currValue); 
}

React、Redux Form：更改处理程序不允许以任何方式翻转传递的参数

React, Redux Form: Change handler does not allow flipping of passed arguments in any manner

javascript

reactjs

redux-form