how to set Input value in formField ReactJs

问题:

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>
            );
        }
    }

回答1:

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.

回答2:

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}

回答3:

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