how to set Input value in formField ReactJs

Question

i cannot able to set value to the Inputfield in Form. below is my code. even i tried to give direct value too like in value='ABC' in input element. but no luck. when i tried to display value outside Form Tag like

<h1>{this.state.company.companyCode}</h1>

this shows value. but not inside Form.

    class UpdateCompany extends Component {

        constructor(props) {
            super(props);
            this.state = {
            companycode: { value: ''},
            company: ''
            };
            this.loadCompanydetail = this.loadCompanydetail.bind(this);        
        }

        loadCompanydetail(companyid) {
            GetCompanyById(companyid)
            .then(response => {
                this.setState({
                    company: response
                });
            }).catch(error => {
                if(error.status === 404) {
                    this.setState({
                        notFound: true,
                        isLoading: false
                    });
                } else {
                    this.setState({
                        serverError: true,
                        isLoading: false
                    });        
                }
            });        
        }

        componentDidMount(){        
            const companyid =this.props.match.params.companyId;
            this.loadCompanydetail(companyid);
        }

        render() {
            const { getFieldDecorator } = this.props.form

            return (
                    <h1 className="page-title">Edit Company - {this.state.company.companyCode}</h1>

                        <Form>
                            <Form.Item label="Company Code">
                                {getFieldDecorator('companycode', {
                                    rules: [
                                      {
                                        required: true,
                                        message: 'Please enter Code',
                                        max: 3,
                                      },
                                    ],
                                  })(<Input name="companycode" value={this.state.company.companyCode} />)}
                            </Form.Item>
                            <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                                <Button type="primary" 
                                    htmlType="submit" 
                                    size="large">Submit</Button>
                            </Form.Item>
                        </Form>
            );
        }
    }

It seems like you're using Ant-Design. Could you please include your imports, tag question and adjust title? — Tymek, Jul 02 '19 at 11:44

score 0 · Accepted Answer · answered Jul 02 '19 at 11:44

Your question seems a little hit and miss. From my understanding, you are trying to set the value of the input field as the user types in. You need to use the onChange event handler with the input field. Also, I would suggest you to not use nested objects inside the state. Here's a simple approach

state = {
    companyCode: ''
 };

Now, Inside your render function for the input field you need to use a onChange handler:

<input type="text" name="companyCode" value={this.state.companyCode} onChange={this.handleChange} />

You can define the handleChange function outside the render function. Also, you can use arrow functions to avoid binding to this. Here's an example:

handleChange = e => {
    this.setState({ companyCode: e.target.value });
}

Learn more about events in react.

score 0 · Answer 2 · answered Jul 02 '19 at 11:48

0

Not sure how your Input component is designed, but it seems that you are passing an object as the value.

You set companyCode as an object:

companycode: { value: ''}

So you should use it like this:

value={this.state.company.companyCode.value}

answered Jul 02 '19 at 11:48

Sagiv b.g

30,379
9
68
99

Tymek · Answer 3 · 2019-07-03T09:07:09.147

0

Two-way binding getFieldDecorator from antd will not work for nested state (company.companyCode). You can find documentation on https://ant.design/components/form/#Form.create(options)

Try assigning and using companyCode with setFieldsValue.

  setFieldsValue({
    companyCode: response.companyCode,
  });

Example: https://codesandbox.io/s/romantic-dubinsky-ln4yu?fontsize=14

edited Jul 03 '19 at 09:07

answered Jul 02 '19 at 11:49

Tymek

3,000
1
25
46

Thanks for your idea. actually the value is displaying if i use just input tag inside form.item. but if i use {getFieldDecorator} then the value is not displaying... – uday Jul 03 '19 at 05:44
also if i try to edit value. the value is not changing... even i create handlechange function. seems like the displaying db value is considering as object in input value. – uday Jul 03 '19 at 06:27
My bad. `setFieldsValue`, not `setState`. Updated. Remember you don't have to use form library from Ant. You can just save values in state or add something like Formik or React-Final-Form. – Tymek Jul 03 '19 at 09:05
Thnaks, i achieved this action using... clear the state of datasource and call the dataload function inside handleDelete function. – uday Jul 04 '19 at 07:11

how to set Input value in formField ReactJs

3 Answers3

Linked