如何通过传递对象来初始化表单输入值？答案

【问题标题】：How to initialize the form input values by passing an object?如何通过传递对象来初始化表单输入值？
【发布时间】：2016-09-15 00:08:27
【问题描述】：

我正在尝试使用 formsy-react 创建一个编辑表单。有没有办法使用对象来初始化formsy-react中的表单输入值，而不是手动执行<Input value={this.state.someValue} />。

我的表单代码如下。

<Formsy.Form className="horizontal" onValidSubmit={this._handleSubmit.bind(this)}>            
  <fieldset>                                                                                                             
    <legend>Product Details</legend>                                                                                     
    <Input name="name" label="Name" type="text" required />                                                              
    <Input name="sku" label="SKU" type="text" required />
  </fieldset>                                                                                                            
                                                                                                                         
  <fieldset>                                                                                                             
    <Row layout='horizontal'>                                                                                            
      <input className="btn btn-primary" formNoValidate={true} type="submit" defaultValue="Submit" /> &nbsp;             
      <button className="btn btn-default" onClick={this._handleCancel.bind(this)}>Cancel</button>                        
    </Row>                                                                                                               
  </fieldset>                                                                                                            
</Formsy.Form>

【问题讨论】：

标签： formsy-react

【解决方案1】：

您可以获取Formsy.Form 的引用并使用填充表单的对象调用reset function。

import React, { Component } from 'react';
import Formsy from 'formsy-react';
import { Input, Row } from 'formsy-react-components';

class App extends Component {
    componentDidMount() {
        this.handleReset();
    }
    handleReset = () => {
        this.formsyForm.reset({name: 'Widget', sku: 'abc-123'});
    }
    handleSubmit = (formData) => {
        console.log(formData);
    }
    render() {
        return (
          <Formsy.Form ref={(formsyForm) => { this.formsyForm = formsyForm; }} className="horizontal" onSubmit={this.handleSubmit}>
              <fieldset>
                  <legend>Product Details</legend>
                  <Input name="name" label="Name" type="text" value="" required />
                  <Input name="sku" label="SKU" type="text" value="" required />
              </fieldset>
              <fieldset>
                  <Row layout='horizontal'>
                      <input className="btn btn-primary" formNoValidate={true} type="submit" defaultValue="Submit" /> &nbsp;
                      <button className="btn btn-default" type="button" onClick={this.handleReset}>Reset</button>
                  </Row>
              </fieldset>
          </Formsy.Form>
        );
    }
}

export default App;

【讨论】：

谢谢，蒂姆。我还是要试试这个。我一直在使用 redux-form，但对它不太满意。