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

Question

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

你可以得到一个裁判的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;