单击复选框时访问redux-form值,而不是提交按钮

时间:2018-01-19 20:32:25

标签: javascript reactjs redux redux-form

我是Redux-form的新手,我试图在复选框上访问onChange处理函数内部的表单值。

我可以提醒值/控制台记录值。但是,当我选中复选框时,我想访问这些值。

默认情况下,此复选框也会被选中。请指教/帮助。提前谢谢。

         onClickOnLoanInsurence = (CheckBox1) =>{
                 //here i can access the value of checkbox, however, the value is inverted, what it means is, it shows false when true and true when false
         }
         <Field
          name="CheckBox1"
          component="input"
          type="checkbox"
          defaultChecked={true}
          component={renderCheckBoxField}
          onChange  ={this.onClickOnLoanInsurence.bind(this,CheckBox1)}             
          label="Some Label"
        />

       const selector = formValueSelector("myForm");
       MyForm= connect(state => {
        const values = selector(
        state,
        "FormField1",
        "FormField2",
        "FormField3",
        "FormField4",
        "CheckBox1",
        "FormField5",
        "FormField6",
        "FormField7",
       );  
       console.log("values of the form");
       console.log(values);
       //window.alert(`You submitted:\n\n${JSON.stringify(values, null,  2)}`);
       return {
           values
       };
     })(MyForm)

    const mapStateToProps = (state,props) => {  
    const checkBox1= selector(state, "CheckBox1")

    return {   
       checkBox1: !state.CheckBox1,

    }
   }

  //CheckBox component

  import React from 'react';

  export const renderCheckBoxField = props => {
    const { input: { onBlur,onFocus, ...rest } } = props;  
   return(
      <div className="form-group">
        <div className="checkbox">
          <label className="container-checkbox">{props.label}
           <input {...rest} type="checkbox"  />
           <span className="checkmark"></span>
          </label>
        </div>
      </div>
     )
    }

0 个答案:

没有答案