Как инициализировать входные значения формы, передавая объект?

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

Вы можете получить реф к 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;