setFieldsValue not working while trying update onchange same form item

See original GitHub issue

setFieldsValue not working while trying update onchange same form item. (** If I am trying set value different form item its working )

not working

this.props.form.setFieldsValue({
                test: 100,
            });

working

this.props.form.setFieldsValue({
                otherFormItem: 100,
            });

Complete Code

@import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Form, Input } from 'antd';
const FormItem = Form.Item;

@connect()
class TestForm extends React.Component {

    handleChange = (e) => {
        console.log(e.target.value);
        console.log("before", this.props.form.getFieldsValue().test);

        if (e.target.value > 100) {
            this.props.form.setFieldsValue({
                test: 100,
            });
        }
        console.log("after", this.props.form.getFieldsValue().test);
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = 'vertical';
        return (
            <Form>
            	<br/>
                    <FormItem label="Test " {...formItemLayout}  >
                        {getFieldDecorator('test', {rules: [{ required: true, message: 'Please input your test !',  }],  onChange: this.handleChange, })(
                            <Input placeholder="test"   /> 
                             )}
                        </FormItem>
                       <FormItem label="otherFormItem " {...formItemLayout}  >
                        {getFieldDecorator('otherFormItem', {rules: [{ required: true, message: 'Please input your  !',  }],  onChange: this.handleChange, })(
                            <Input placeholder="otherFormItem"   /> 
                             )}
                        </FormItem>
                </Form>
        )
    }
}

const Test = Form.create({})(TestForm);

export default Test

Issue Analytics

State:
Created 7 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

17reactions

luisgurmendezcommented, Sep 5, 2018

@daskyrk Here is how:

class ....{

onChange = (value) => {
// Custom method
//Example
if(value > 100){
   value = 100;
}

return value;
}



render(){
.
.

<FormItem>
      {getFieldDecorator("range-input", {
          getValueFromEvent: this.onChange,
        })(
       <NumericInput placeholder="%" />
       )}
</FormItem>
.
.

}
}

5reactions

daskyrkcommented, Apr 16, 2018

@iiitmahesh have you find out how to use getValueFromEvent ?