オブジェクトを渡してフォームの入力値を初期化するにはどうすればよいですか？

Question

私はformsy-reactを使用して編集フォームを作成しようとしています。手動で<Input value={this.state.someValue} />を実行する代わりに、formsy-reactのフォーム入力値を初期化するオブジェクトを使用する方法がありますか。

私のフォームのコードは以下の通りです。

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