formsy-react - 如何通过传递对象来初始化表单输入值？

Question

我正在尝试使用 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>                                                                                                           

Answer 1

您可以获取 ref并使用填充表单的对象Formsy.Form调用该reset函数。

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;