как установить входное значение в formField ReactJs

Question

Я не могу установить значение для поля ввода в форме.ниже мой код.даже я пытался дать прямое значение слишком, как в value='ABC' в элементе ввода.но не повезло.когда я пытался отобразить значение за пределами формы тега, как

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

, это показывает значение.но не внутри формы.

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

Answer 1

Не уверен, как устроен ваш Input компонент, но кажется, что вы передаете объект как value.

Вы устанавливаете companyCode как объект:

companycode: { value: ''}

Так что вы должны использовать это так:

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

Answer 2

Двусторонняя привязка getFieldDecorator из antd не будет работать для вложенного состояния (company.companyCode). Вы можете найти документацию по https://ant.design/components/form/#Form.create(options)

Попробуйте назначить и использовать companyCode с setFieldsValue.

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

Пример: https://codesandbox.io/s/romantic-dubinsky-ln4yu?fontsize=14

Answer 3

Ваш вопрос кажется немного хитом. Насколько я понимаю, вы пытаетесь установить значение поля ввода при вводе пользователем. Вам нужно использовать обработчик событий onChange с полем ввода. Также я бы посоветовал вам не использовать вложенные объекты внутри состояния. Вот простой подход

state = {
    companyCode: ''
 };

Теперь, внутри вашей функции рендеринга для поля ввода вам нужно использовать обработчик onChange:

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

Вы можете определить функцию handleChange вне функции рендеринга. Также вы можете использовать функции стрелок, чтобы избежать привязки к этому. Вот пример:

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

Подробнее о событиях в реакции.